更新记录

2.0.1(2022-04-21)

更新小程序端样式报错

2.0(2021-12-29)

1、支持一级、二级、三级联动多选 2、支持自定义颜色皮肤 3、支持自定义数据

1.0.1(2021-12-23)

1、默认支持城市二级多选。自定义多选数量。可根据数据结构自定义数据

查看更多

平台兼容性

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

插件使用说明

  1. 数据来源common/data.js,common/levelone-data.js需要引入数据。如果要自定义数据,可根据数据结构构造。

    多级数据结构如下

[
        {
            "id": "1",
            "pid": "0",
            "name": "北京市",
            "children": [
                {
                    "id": "37",
                    "pid": "1",
                    "name": "东城区",
                    "children": [
                        {
                            "id": "567",
                            "pid": "37",
                            "name": "东华门街道"
                        }
                      ]
                  }
               ]
          }   
]

单级数据结构如下

[
        {
            "id": "1",
            "name": "挖掘机",
        },{
            "id": "2",
            "name": "推土机",
        }   
]

2、默认使用unipop底部弹框,如果要使用弹框需要在项目中导入components/uni-popupcomponents/uni-transition文件,页面中会自动加载。

3、插件引入

import moreSelect from "@/components/more-select.vue"
export default {
        components: {
            moreSelect
        }
}

<more-select></more-select>

##如果要使用uni-popup弹框,需要引入uni-popup插件爱,然后
<uni-popup ref="cityMore" type="bottom">
            <more-select :cityData="cityData" @chooseCity="chooseCity" @switchCity="switchCity" :cityIndex="cityIndex"
                @scrollCity="scrollCity" @closeCity="closeCity" @queryCity="queryCity" :oldScrollTop="oldScrollTop"
                :scrollTop="scrollTop" :chooseCityList="chooseCityList" :title="title" :cityIdArr="cityIdArr" @delCity="delCity"
                ref="moreselects" :maxCount="maxCount" :level="level" :colorValue="colorValue"></more-select>
</uni-popup>

4、相关数据参数说明

参数 说明
cityData 数据来源
cityIdArr 选择的数据Id数组,默认为空,可以不用修改
scrollTop scroll-view滚动条高度,用于多级联动每次选择分类后重置子数据高度(默认是0,可以不用修改)
oldScrollTop 用于每次选择分类后重置子数据高度(默认是0,可以不用修改)
cityIndex 默认选择的分类(默认为0)
maxCount 最多允许选择的数量(默认为3个)
cityName 最终显示的数据名称
title 弹框标题
colorValue 皮肤颜色(默认#016CE1)

5、相关方法说明

方法 说明
queryCity 点击确认后执行的方法
closeCity 点击关闭后执行的方法
chooseCity 选中某一项后执行的方法
switchCity 切换分类后执行的方法

隐私、权限声明

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

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

插件不采集任何数据

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

许可协议

MIT协议

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