Address Picker 地区联动选择器

使用指南

在 page.json 中引入组件

  1. "usingComponents": {
  2.   "w-address-picker": "wuss-weapp/w-address-picker/index",
  3. }

视频演示

代码演示

  1. <w-pane title="AddressPicker" desc="地区选择器" />
  3. <w-pane desc="当前选择: {{ address }}" />
  5. <w-cell-group>
  6.   <w-address-picker
  7.     label="正常使用"
  8.     bind:onChange="handleChange"
  9.   />
  10.   <w-address-picker
  11.     label="设置默认地址"
  12.     bind:onChange="handleChange"
  13.     defaultValue="{{ ['广东省','广州市','天河区'] }}"
  14.   />
  15.   <w-address-picker
  16.     showCode
  17.     label="传入地区Code值"
  18.     label-span="5"
  19.     bind:onChange="handleChange"
  20.     defaultValue="{{ ['310000', '310100', '310115'] }}"
  21.   />
  22. </w-cell-group>
  1. data: {
  2.   address: '',
  3. },
  4. handleChange(e) {
  5.   console.log(e)
  6.   this.setData({ address: e.detail.value.join(' ','') })
  7. },

css

API

Attribute 属性

属性 说明 类型 默认值
label 标签 string 请选择地址
labelSpan 标签所占宽度 number 3
defaultValue 初始化的默认值 array []
currentValue 设置当前激活的值 array []
showCode 返回的值是否是地址的code码 boolean false
disabled 禁用 boolean false
customItem 可为每一列的顶部添加一个自定义的项 string -

Event 事件

事件名 说明 参数
onChange 改变值后的回调 e.detail.value
onCancel 取消按钮的回调 -

Slot 插槽

名称 说明

Class 自定义类名

类名 说明
wuss-class 根节点样式类