vue中 require方式引入js文件

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);

猜你喜欢

转载自blog.csdn.net/zgpeterliu/article/details/80289307