93 lines
3.6 KiB
Markdown
93 lines
3.6 KiB
Markdown
|
# 功能介绍
|
|||
|
|
|
|||
|
|
- 多端支持 （小程序，h5, app）
|
|||
|
|
- 多种双向绑定（区域编码，区域名称）
|
|||
|
|
- 支持返回区域编码、区域名称
|
|||
|
|
- 支持加载自定义地址json内容
|
|||
|
|
|
|||
|
|
# 使用方法
|
|||
|
|
|
|||
|
|
1. 点击右上角的 `使用 HBuilder X 导入插件` 按钮直接导入项目或点击 `下载插件 ZIP` 按钮下载插件包并解压到项目的 `uni_modules` 目录下
|
|||
|
|
|
|||
|
|
2. 在需要用到该组件的页面中添加
|
|||
|
|
|
|||
|
|
```vue
|
|||
|
|
<template>
|
|||
|
|
<sh-address @change="change" v-model="data"> </sh-address>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
export default {
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
data: ['四川省', '成都市', '青羊区']
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
methods: {
|
|||
|
|
change(addressInfo) {
|
|||
|
|
console.log('选择了--->', addressInfo)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
```vue
|
|||
|
|
<!-- 自定义加载json文件 -->
|
|||
|
|
<!-- 注意: 使用loadJson时 请注释源码中utils文件夹下的address.json文件 并删除源码中注释可删除的位置 以减小代码体积 -->
|
|||
|
|
<template>
|
|||
|
|
<sh-address :loadJson="loadAddress" @change="change" v-model="data"> </sh-address>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
export default {
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
data: ['四川省', '成都市', '青羊区']
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
methods: {
|
|||
|
|
change(addressInfo) {
|
|||
|
|
console.log('选择了--->', addressInfo)
|
|||
|
|
},
|
|||
|
|
loadAddress() {
|
|||
|
|
// 模拟异步加载json数据
|
|||
|
|
return new Promise(resolve => {
|
|||
|
|
setTimeout(() => {
|
|||
|
|
resolve(address)
|
|||
|
|
}, 4000);
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
# 组件属性
|
|||
|
|
|
|||
|
|
| 属性名 | 类型 | 默认值 | 描述 |
|
|||
|
|
| ------------------ | ------- | ------- | ------------------------------------------------------------ |
|
|||
|
|
| modelValue/v-model | Array | [] | 双向绑定，一个数组从下标0开始分别填写省、市、区名称 |
|
|||
|
|
| v-model:codeValue | Array | [] | 双向绑定，一个数组从下标0开始分别填写省、市、区编码（注意：同时绑定modelValue时此属性会依照modelValue来更新所选择的内容，此时v-model:codeValue双向绑定仍然生效） |
|
|||
|
|
| disabled | Boolean | false | 是否禁用（快手小程序不支持） |
|
|||
|
|
| selectIndex | Array | [0,0,0] | selectIndex每一项的值表示选择了 range 对应项中的第几个（下标从 0 开始） |
|
|||
|
|
| loadJson | () => Promise<JsonAddress> | | 加载自定义json，需要传入一个返回Promise的函数，JsonAddress类型参考下表 |
|
|||
|
|
|
|||
|
|
# JsonAddress类型
|
|||
|
|
| 属性| 类型 | 必填 |
|
|||
|
|
| -- | -- | -- |
|
|||
|
|
| code | String | 是 |
|
|||
|
|
| name | String | 是 |
|
|||
|
|
| child | Array<JsonAddress> | 是 |
|
|||
|
|
|
|||
|
|
# 事件
|
|||
|
|
|
|||
|
|
| 事件名称 | 类型 | 描述 |
|
|||
|
|
| ------------ | ----------- | ------------------------------------------------------------ |
|
|||
|
|
| cancel | EventHandle | 用户点击取消时回调 |
|
|||
|
|
| change | EventHandle | 用户点击确认按钮触发该事件，event = {areaCode: string,area: string,cityCode: string,provinceCode: string,province: string,city: string} |
|
|||
|
|
| columnchange | EventHandle | 某一列的值改变时触发 columnchange 事件，event = {column: number, value: number}，column 的值表示改变了第几列（下标从0开始），value 的值表示变更值的下标 |
|
|||
|
|
|