post.vue
import timePicker from '@/components/timePicker'
import { mapState } from 'vuex'
import * as _ from '../util/tool'
import api from '../fetch/api'
require('../util/city-picker.js')
import $city from '../util/city.js'
mounted() {
new MultiPicker({
input: 'multiPickerInput',//点击触发插件的input框的id
container: 'address-select',//插件插入的容器id
jsonData: $city,
success: (arr) => {
console.log(arr)
switch(arr.length) {
case 2:
this.destination1 = arr[0].value + ' ' + arr[1].value
break
case 3:
this.destination1 = arr[0].value + ' ' + arr[1].value + ' ' + arr[2].value
break
}
}//回调
});
},
city.js
var $city = [
{
"value": "北京",
"child": [
{
"value": "请选择"
},
{
"value": "东城区"
},
{
"value": "西城区"
},
{
"value": "崇文区"
},
{
"value": "宣武区"
},
{
"value": "朝阳区"
},
{
"value": "海淀区"
},
{
"value": "丰台区"
},
{
"value": "石景山区"
},
{
"value": "房山区"
},
{
"value": "通州区"
},
{
"value": "顺义区"
},
{
"value": "昌平区"
},
{
"value": "大兴区"
},
{
"value": "怀柔区"
},
{
"value": "平谷区"
},
{
"value": "门头沟区"
},
{
"value": "密云县"
},
{
"value": "延庆县"
},
{
"value": "其他"
}
],
"id": 0
},
export default $city
city-picker.js
(function (wid, dcm) {
var win = wid;
var doc = dcm;
function MultiPicker(config) {
this.input = config.input;
this.container = config.container;
this.jsonData = config.jsonData;
this.success = config.success;
this.ulCount = 0; //记录上一次的
this.ulIdx = 0; //ul下标计数器,前一次的计数器
this.ulDomArr = [];//ul的dom元素,【a】
this.idxArr = [];//更新后的ul的下标 【a】
this.jsonArr = [];//用来存储每个ul的li中显示的arr【a】
this.liHeight = 40;
this.maxHeight = [];//每个ul的最大高度【a】
this.distance = [];//transition的移动位置【a】
this.start = {
Y: 0,
time: ''
};
this.move = {
Y: 0,
speed: []
};
this.end = {
Y: 0,
status: true,
};
this.resultArr = [];
this.initDomFuc();
this.initReady(0, this.jsonData[0]);
this.initBinding();
}
MultiPicker.prototype = {
constructor: MultiPicker,
generateArrData: function (targetArr) {
var tempArr = [];
loop(0, targetArr.length, function (i) {
tempArr.push({
"id": targetArr[i].id,
"value": targetArr[i].value
})
});
return tempArr;
},
};
if (typeof exports == "object") {
module.exports = MultiPicker;
} else if (typeof define == "function" && define.amd) {
define([], function () {
return MultiPicker
})
} else {
win.MultiPicker = MultiPicker;
}
})(window, document);