更新记录
1.0.4(2023-08-23) 下载此版本
文档优化
1.0.3(2023-08-23) 下载此版本
代码优化及文档优化
1.0.2(2023-08-23) 下载此版本
新增组件说明文档,新增设置组件默认选中
查看更多平台兼容性
Vue2 | Vue3 |
---|---|
√ | √ |
App | 快应用 | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 |
---|---|---|---|---|---|---|
HBuilderX 3.1.0 app-vue app-nvue | × | √ | × | √ | √ | √ |
钉钉小程序 | 快手小程序 | 飞书小程序 | 京东小程序 |
---|---|---|---|
× | √ | √ | √ |
H5-Safari | Android Browser | 微信浏览器(Android) | QQ浏览器(Android) | Chrome | IE | Edge | Firefox | PC-Safari |
---|---|---|---|---|---|---|---|---|
√ | √ | √ | √ | √ | √ | √ | √ | √ |
bf-address
基于 uniapp
的picker
二次封装的地区选择组件,支持h5、小程序、App。地区数据截止2023-06-04。
功能
- 支持省市区三级联动
- 支持数据回显
- 支持
easycom
使用方式
安装完毕之后直接使用即可
<bf-address :value="[0,0,1]" ref="bfAddress" @confirm="onConfirm"></bf-address>
methods:{
onConfirm(val) {
console.log(val) // {label: '辽宁省-本溪市-平山区', code: '21,2105,210502'}
}
}
属性及方法
参数 | 取值 |
---|---|
value | 用于设置地址回显,接收的是每列的下标,默认为[0,0,1],也就是北京省,北京市,东城区 |
@confirm | 用于获取选中的省市区数据 {label: '辽宁省-本溪市-平山区', code: '21,2105,210502'} |
内置方法codeToIndex
如需数据回显,可以传入省市区code码(必须是字符串),如:21,2105,210502,即可返回每列对应的下标
<bf-address :value="value" ref="bfAddress" @confirm="onConfirm"></bf-address>
<button @click="getIndex">
模拟ajax获取code并给组件设置默认选中
</button>
data(){
return {
value:[0,0,1]
}
}
methods:{
getIndex(){
setTimeout(()=>{
var indexArr = this.$refs.bfAddress.codeToIndex("21,2105,210502")
console.log(indexArr) // [5, 4, 0]
this.value = indexArr // 辽宁省-本溪市-平山区 自动选中
},2000)
}
}