Skip to main content

address

Last updated on
  • 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ừ version 0.0.19 trở lên.

Cài đặt tini-ui:

$> yarn add @tiki.vn/tini-ui

Thuộc tính

Thuộc tínhKiểu dữ liệuGiá trị mặc địnhMô tả
firstCitiesarray 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
streetstringSố nhà và tên đường
cityAddress objectTỉnh/thành phố
districtAddress objectQuận/huyện
wardAddress objectPhường/xã
full_namestringHọ và tên
phone_numberstringSố điện thoại. Chỉ cho phép nhập số.
streetLabelstringLabel cho street
streetPlaceholderstringPlaceholder cho street
cityPlaceLabelstringLabel cho city
cityPlaceholderstringPlaceholder cho city
districtPlaceLabelstringLabel cho district
districttPlaceholderstringPlaceholder cho district
wardPlaceLabelstringLabel cho ward
wardPlaceholderstringPlaceholder cho ward
namePlaceLabelstringLabel cho name
namePlaceholderstringPlaceholder cho name
phonePlaceLabelstringLabel cho phone
phonePlaceholderstringPlaceholder cho phone
streetErrorMsgstringError message cho street
cityErrorMsgstringError message cho city
districtErrorMsgstringError message cho district
wardErrorMsgstringError message cho ward
nameErrorMsgstringError message cho name
phoneErrorMsgstringError message cho phone
showNamebooleantrueHiển thị trường name hay không
showPhonebooleantrueHiển thị trường phone hay không
onChangeStreeteventSự kiện được kích hoạt khi street thay đổi
onChangeNameeventSự kiện được kích hoạt khi name thay đổi
onChangePhoneeventSự kiện được kích hoạt khi phone thay đổi
onChangeCityeventSự kiện được kích hoạt khi city thay đổi
onChangeDistricteventSự kiện được kích hoạt khi district thay đổi
onChangeWardeventSự kiện được kích hoạt khi ward thay đổi
onChangeAddresseventSự kiện được kích hoạti khi address thay đổi
onFullAddresseventSự kiện được kích hoạt khi các thông tin address được điền đầy đủ

Address object

Thuộc tínhKiểu dữ liệuMô tả
idnumberMã của city/district/ward
namestringTên hiển thị của city/district/ward
Address component

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);
}
});