更新记录

1.0.0 (2024-01-29) 下载此版本

1.0.0(2024-01-29)

初始发布 在三级联动的省市区选择器中,用户可以进行多种操作,包括多选省份、多选省份和城市、多选区县,并且支持同时进行多选操作。用户可以随时删除已选择的省、市、或区


平台兼容性

Vue2 Vue3
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
HBuilderX 3.8.1 app-vue × × × × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
× × × × × ×

功能描述:

  1. 多选省份: 用户可以在省份列表中进行多选操作,选择感兴趣的省份。 已选择的省份将以可视化的方式显示在选择器的顶部,方便用户查看和管理选择。
  2. 多选省份和城市: 用户可以在省份列表中进行多选操作,同时在所选省份的基础上,选择感兴趣的城市。 已选择的省份和城市将以可视化的方式显示在选择器的顶部,方便用户查看和管理选择。
  3. 多选区县: 用户可以在省份和城市的基础上,继续进行多选操作,选择感兴趣的区县。 已选择的省份、城市和区县将以可视化的方式显示在选择器的顶部,方便用户查看和管理选择。
  4. 同时多选: 用户可以同时进行多选省份、城市和区县的操作,根据需求选择多个地区。 已选择的省份、城市和区县将以可视化的方式显示在选择器的顶部,清晰展示用户的选择。
  5. 可删除选择: 用户可以随时删除已选择的省份、城市或区县,以便灵活调整他们的选择。 删除操作可以通过点击选择器顶部已选项的删除按钮或其他交互方式进行。

使用方式

<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 清空返回

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问