vue mobileselect使用小计

1、npm install mobile-select -D

2、import MobileSelect from 'mobile-select'

    a、html
　　　　<a class="search-item"> 
       　　<span id="province-tr">{{ provinceTxt}}</span>
       　　<i class="down-icon"></i>
    　　</a>

　　　　　　　　<span id="city-tr">{{ cityTxt }}</span>

　　　　　 </a>

　　b、js

        var provinceSelect = new MobileSelect({
            trigger: "#province-tr", //触发点击事件的dom节点的选择器 可以是id/class等

            title: "选择省份",//空间的标题，通过setTitle()进行设置=》citySelect.setTitle('新标题')

            triggerDisplayData: false, //设置触发控件的按钮的文本是否根据选项改变，默认是true随控件选择项改变，

　　　　　　　position：[0,1],//初始化各个wheel选项选中的初始值，这个0，1是索引。通过locatePostion(1，0)设置，把第索引为1的wheel的选中项改成索引为0的值

　　　　　　　connector: ""，//当控件有多个选项时多个值默认以空格连接的，可以通过这个属性进行修改

　　　　　　　ensureBtnText: "确认", //控件确认按钮的文本通过这个属性设置

　　　　　　　cancelBtnText："取消", //设置控件取消按钮的文本

　　　　　　　ensureBtnColor: "#000", //设置控件确认按钮的文本颜色

　　　　　　　cancelBtnColor: "#000", //设置控件取消按钮的文本颜色

　　　　　　　titleColor: "#CCC",//设置控件title文本的颜色

　　　　　　　titleBgColor: "#CCC",//设置控件title的背景颜色

　　　　　　　textColor: "blue", //设置滚动选项的文本的颜色

　　　　　　　bgColor: "#eee", //设置滚轮的背景颜色

　　　　　　　maskOpacity: "0.5", //遮罩的透明度

　　　　　　　keyMap: {//当后台传给我们的数据key和控件key不同时可以用这个属性设置映射
　　　　　　　　　id: 'key',
　　　　　　　　　value: 'name',
　　　　　　　　　child: 'child'
　　　　　　　},

            wheels: [//设置控件的可选择数据，child内与外联动，多个并列不联动
                {
                    data: that.provinces
                }
            ],
　　　　　　　transitionEnd：function（index, data）{//每一次手势滑动选项后的回调函数
　　　　　　　　　console.log(index)
　　　　　　　　　console.log(data)
　　　　　　　}，　
            callback:function(indexArr, data){//选择完成后的回调
                let strData = data.toString()
                that.lists = []
                that.searchData.page = 1
                that.searchData.province = strData
                that.provinceTxt = strData
                delete that.searchData.city
                that.getStoreList(that.url, that.searchData)

                if (strData) {
                    that.allCitys.forEach((item, index) => {
                        if (item.province == that.searchData.province) {
                            this.citys = item.citys
                        }
                    }) 
                }
                citySelect.updateWheel(0, this.citys)//拿到citySelect实例当数据改变后通过updateWhell进行选择数据更新。第一个代表第几个滚轮的索引，第二个参数是更新的数据
            }
        })
        var citySelect = new MobileSelect({
            trigger: "#city-tr",
            title: "选择城市",
            triggerDisplayData: false, //是否设置按钮的值
            wheels: [
                {
                    data: that.citys
                }
            ],
            callback:function(indexArr, data){
                console.log(data)
                let strData = data.toString()
                that.lists = []
                that.searchData.page = 1
                console.log(strData)
                that.searchData.city = strData
                that.cityTxt = strData
                that.getStoreList(that.url, that.searchData)
            }
        })

　　　其他方法：
　　　citySelect.show() //唤起弹窗
　　　citySelect.hide() //隐藏弹窗
　　　citySelect.getValue() //获取citySelect选择的值
　　　citySelect.updateWheels() //重新渲染全部wheel数据 仅含联动数据

vue mobileselect使用小计

猜你喜欢