xiaokuaisong-paotui/distribution/uni_modules/sh-address

功能介绍

• 多端支持 （小程序，h5, app）
• 多种双向绑定（区域编码，区域名称）
• 支持返回区域编码、区域名称
• 支持加载自定义地址json内容

使用方法

1. 点击右上角的 使用 HBuilder X 导入插件 按钮直接导入项目或点击 下载插件 ZIP 按钮下载插件包并解压到项目的 uni_modules 目录下

2. 在需要用到该组件的页面中添加

   <template>
      <sh-address @change="change" v-model="data"> </sh-address>
   </template>
   
   <script>
      export default {
         data() {
            return {
               data: ['四川省', '成都市', '青羊区']
            }
         }
         methods: {
            change(addressInfo) {
               console.log('选择了--->', addressInfo)
            }
         }
      }
   </script>
   

   <!-- 自定义加载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		加载自定义json，需要传入一个返回Promise的函数，JsonAddress类型参考下表

JsonAddress类型

属性	类型	必填
code	String	是
name	String	是
child	Array	是

事件

事件名称	类型	描述
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 的值表示变更值的下标