更新记录
1.0.0 (2024-01-29)
下载此版本
1.0.0(2024-01-29)
初始发布
在三级联动的省市区选择器中,用户可以进行多种操作,包括多选省份、多选省份和城市、多选区县,并且支持同时进行多选操作。用户可以随时删除已选择的省、市、或区
平台兼容性
App |
快应用 |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节小程序 |
QQ小程序 |
HBuilderX 3.8.1 app-vue |
× |
× |
× |
× |
× |
× |
钉钉小程序 |
快手小程序 |
飞书小程序 |
京东小程序 |
× |
× |
× |
× |
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
× |
× |
× |
√ |
√ |
× |
√ |
× |
× |
功能描述:
- 多选省份:
用户可以在省份列表中进行多选操作,选择感兴趣的省份。
已选择的省份将以可视化的方式显示在选择器的顶部,方便用户查看和管理选择。
- 多选省份和城市:
用户可以在省份列表中进行多选操作,同时在所选省份的基础上,选择感兴趣的城市。
已选择的省份和城市将以可视化的方式显示在选择器的顶部,方便用户查看和管理选择。
- 多选区县:
用户可以在省份和城市的基础上,继续进行多选操作,选择感兴趣的区县。
已选择的省份、城市和区县将以可视化的方式显示在选择器的顶部,方便用户查看和管理选择。
- 同时多选:
用户可以同时进行多选省份、城市和区县的操作,根据需求选择多个地区。
已选择的省份、城市和区县将以可视化的方式显示在选择器的顶部,清晰展示用户的选择。
- 可删除选择:
用户可以随时删除已选择的省份、城市或区县,以便灵活调整他们的选择。
删除操作可以通过点击选择器顶部已选项的删除按钮或其他交互方式进行。
使用方式
<button @click="selectionMoreStata=true">打开地址选择器</button>
<selectionMore :internalData="checkData" @export="setPlates" @handleClose="clostMoreStata" @close="clostArrData" v-if="selectionMoreStata" ></selectionMore>
<script>
export default {
data() {
return {
selectionMoreStata:false,
checkData:[]
};
},
methods: {
clostArrData() {
this.checkData = [];
this.selectionMoreStata=false
},
setPlates(param,data){
console.log(param); // 返回的查询条件
// parmam
// {
// "loadProvinceId": [],
// "loadCityId": [],
// "loadDistrictId": [130107,130108, 130109],
// "cityNameString": "井陉矿区, 裕华区, 藁城区,"
// }
this.selectionMoreStata=false
this.checkData = data // 回传子组件 下次打开展示为选中的省市区
},
clostMoreStata(){
this.selectionMoreStata=false
},
}
}
</script>
属性说明
名称 |
类型 |
默认值 |
描述 |
internalData |
Array |
[] |
存储选中的省市区 |
@export |
Function |
|
点击确认回传数据 |
@handleClose |
Function |
|
点击阴影关闭 |
@close |
Function |
|
清空返回 |