更新记录
1.1.4(2020-09-15) 下载此版本
修复了1.1.0(2020-09-14)微信小程序端,APP端运行异常的问题,均测试正常。如有问题请再反馈。
1.1.2(2020-09-15) 下载此版本
修复了微信小程序端,APP端运行异常的问题。如有问题请反馈。
1.1.0(2020-09-14) 下载此版本
多数使用者反馈,app端该组件(示例)运行异常。故而进行了app端与小程序端的测试并进行了调整,发现这两端均有运行异常情况。目前尚无有效解决办法。 在此也希望有能者相助,完善此插件。(有意向者请联系作者邮箱suojiantong@163.com) 不建议app端与小程序端的开发者下载及使用此插件,H5端可以正常使用。 因数据包内无台湾省、香港特别行政区、澳门特别行政区的市县信息,故而屏蔽了这三个地区的选项。请注意!!!
查看更多平台兼容性
使用说明
该插件依赖于gb2260包 数据来源及地区编码参考
目前示例在H5端、微信小程序端、APP端测试均可用(测试环境H5端chrome 84.0.4147.105,小程序端1.03.2008270(调试基础库2.12.2),APP端网易mumu模拟器)
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
code | String | - | 以地区编码的形式设置默认值(code和name只设置其中一个就可以) |
name | String | - | 以地区编码的形式设置默认值(code和name只设置其中一个就可以) |
provincesRange | String/Array | - | 设置省的可选范围,例['河南省'] ,则省选择项只有河南省 |
prefecturesRange | String/Array | - | 设置市的可选范围,例['开封市','郑州市'] ,则市选择项只会有开封市和郑州市。如果选择的‘省’下,并无该城市,则此选项为空 |
countiesRange | String/Array | - | 设置区的可选范围,例['禹王台区','金水区'] ,则区选择项只会有禹王台区和金水区,如果选择的‘市’下,并无该区域,则此选项为空 |
@update | EventHandle | 该组件初始化选项数据后发布的事件,name/code绑定属性的值发生改变时会触发该事件(响应默认值的动态变化)。可以接收到默认值数据event = {code: code, name: name} | |
@change | EventHandle | 该组件改变选项并确定或确定后发布的事件,可以接收到当前选项的数据event = {code: code, name: name} |
基本示例
<template>
<view class="container">
<gb-picker
@update="update"
@change="change">
<text>{{text}}</text>
</gb-picker>
</view>
</template>
export default {
data() {
return {
text: '',
}
},
methods: {
update (e) {
this.text = e.name.join('/')
},
change(e) {
console.log(e.code)
this.text = e.name.join('/')
}
}
}
限制省及市的选择范围
<template>
<view class="container">
<gb-picker
:provincesRange='provincesRange'
:prefecturesRange='prefecturesRange'
@update="update"
@change="change">
<text>{{text}}</text>
</gb-picker>
</view>
</template>
export default {
data() {
return {
provincesRange: ['河南省'],
prefecturesRange: ['郑州市'],
text: '',
}
},
methods: {
update (e) {
this.text = e.name.join('/')
},
change(e) {
console.log(e.code)
this.text = e.name.join('/')
}
}
}
设置默认值(name)
<template>
<view class="container">
<gb-picker
:name="name"
@update="update"
@change="change">
<text>{{text}}</text>
</gb-picker>
</view>
</template>
export default {
data() {
return {
text: '',
name: ['河南省','郑州市','中原区']
}
},
methods: {
update (e) {
this.text = e.name.join('/')
},
change(e) {
console.log(e.code)
this.text = e.name.join('/')
}
}
}