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>

　　　　　 <a class="search-item">

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

　　　　　　　　<i class="down-icon"></i>

　　　　　 </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數據 僅含聯動數據