address
address
là component trong tini-ui. Cho phép bạn thực hiện các thao tác liên quan tới địa chỉ của Tiki, như lấy thông tin thành phố, quận/huyện, ...- Để sử dụng
address
, bạn cần phải cài tini-ui từ version0.0.19
trở lên.
Cài đặt tini-ui
:
$> yarn add @tiki.vn/tini-ui
Thuộc tính
Thuộc tính | Kiểu dữ liệu | Giá trị mặc định | Mô tả |
---|---|---|---|
firstCities | array of strings | ['Hồ Chí Minh', 'Hà Nội'] | Chỉ định các tỉnh/thành phố được hiển thị đầu tiên trong danh sách |
street | string | Số nhà và tên đường | |
city | Address object | Tỉnh/thành phố | |
district | Address object | Quận/huyện | |
ward | Address object | Phường/xã | |
full_name | string | Họ và tên | |
phone_number | string | Số điện thoại. Chỉ cho phép nhập số. | |
streetLabel | string | Label cho street | |
streetPlaceholder | string | Placeholder cho street | |
cityPlaceLabel | string | Label cho city | |
cityPlaceholder | string | Placeholder cho city | |
districtPlaceLabel | string | Label cho district | |
districttPlaceholder | string | Placeholder cho district | |
wardPlaceLabel | string | Label cho ward | |
wardPlaceholder | string | Placeholder cho ward | |
namePlaceLabel | string | Label cho name | |
namePlaceholder | string | Placeholder cho name | |
phonePlaceLabel | string | Label cho phone | |
phonePlaceholder | string | Placeholder cho phone | |
streetErrorMsg | string | Error message cho street | |
cityErrorMsg | string | Error message cho city | |
districtErrorMsg | string | Error message cho district | |
wardErrorMsg | string | Error message cho ward | |
nameErrorMsg | string | Error message cho name | |
phoneErrorMsg | string | Error message cho phone | |
showName | boolean | true | Hiển thị trường name hay không |
showPhone | boolean | true | Hiển thị trường phone hay không |
onChangeStreet | event | Sự kiện được kích hoạt khi street thay đổi | |
onChangeName | event | Sự kiện được kích hoạt khi name thay đổi | |
onChangePhone | event | Sự kiện được kích hoạt khi phone thay đổi | |
onChangeCity | event | Sự kiện được kích hoạt khi city thay đổi | |
onChangeDistrict | event | Sự kiện được kích hoạt khi district thay đổi | |
onChangeWard | event | Sự kiện được kích hoạt khi ward thay đổi | |
onChangeAddress | event | Sự kiện được kích hoạti khi address thay đổi | |
onFullAddress | event | Sự kiện được kích hoạt khi các thông tin address được điền đầy đủ |
Address object
Thuộc tính | Kiểu dữ liệu | Mô tả |
---|---|---|
id | number | Mã của city/district/ward |
name | string | Tên hiển thị của city/district/ward |

Trong hình minh hoạ trên,
streetLabel
=Địa chỉ nhận hàng
streetPlaceholder
=Nhập số nhà, tên đường
wardPlaceLabel
=Phường / Xã
wardPlaceholder
=Chọn Phường / Xã
Sample Code
index.json
{
"usingComponents": {
"address": "@tiki.vn/tini-ui/es/address/index"
}
}
index.txml
<address
streetErrorMsg="{{streetErrorMsg}}"
cityErrorMsg="{{cityErrorMsg}}"
districtErrorMsg="{{districtErrorMsg}}"
wardErrorMsg="{{wardErrorMsg}}"
streetLabel="Địa chỉ nhận hàng"
streetPlaceholder="Nhập số nhà, tên đường..."
street="{{street}}"
city="{{city}}"
district="{{district}}"
ward="{{ward}}"
full_name="{{full_name}}"
phone_number="{{phone_number}}"
onChangeAddress="onChangeAddress"
onFullAddress="onFullAddress" />
index.js
Page({
data: {
street: '',
city: null,
district: null,
ward: null,
full_name: '',
phone_number: ''
// streetErrorMsg: 'Vui lòng nhập đủ địa chỉ',
// cityErrorMsg: 'Vui lòng nhập thành phố',
// districtErrorMsg: 'Vui lòng nhập quận',
// wardErrorMsg: 'Vui lòng nhập phường',
},
onChangeAddress(address) {
console.log('address :', address);
},
onFullAddress(address) {
console.log('full address :', address);
}
});