ajax鼠标移动,vue.js自定义select2指令并使用ajax远程获取值(包括鼠标滑动下拉分页)...

在用vue做下拉框时想到了select2，但是直接使用的话不能成功，不能获取下拉框的值，然后就想到了封装select指令，废话不多说 直接上代码

//封装v-select指令

封装的directives.js代码

Vue.directive('select2', {

inserted: function (el, binding, vnode) {

let options = binding.value || {};

//默认值开始

var option;

for (var d = 0; d < options.value.length; d++) {

var item = options.value[d];

option = new Option(item.id, item.text, true, true);

$(el).select2().append(option);

}

//默认值结束

$(el).select2(

{

width:"100%",

placeholder : "===请输入关键字===",

allowClear: false,

minimumInputLength : 0,

ajax: {

xhrFields: {

withCredentials: true

},

url:options.url,

type : 'post',

dataType: 'json',

delay: 500, //延迟0.5s加载防止过度查询

data: function (params) {//参数

return {

keyword: params.term,//关键字

pagesize:10,

currpage: params.page || 1,

};

},

processResults: function (data, params) {

var id=options.id;

var text=options.name;

var arr = [];

//根据自己返回的json值做出相应的修改

for(var i in data.result.list){

arr.push({id:data.result.list[i][id],text:data.result.list[i][text]});

}

return {

results: arr,

pagination: { //鼠标下拉是否显示更多的值

more: data.result.totalPage>(params.page||1)

}

};

},

cache: false

},

escapeMarkup: function (markup) { return markup; }

}

).on("select2:select", (e) => {

el.dispatchEvent(new Event('change', { target: e.target }));

options && options.onSelect && options.onSelect(e);

})//在网上查找很多代码都没有下边这几行，以至于多选的时候删除一个选中的时候selectValue值不变(这想了好几天)

.on("select2:unselect", (e) => {

el.dispatchEvent(new Event('change', { target: e.target }));

options && options.onSelect && options.onSelect(e);

});

},

update: function(el, binding, vnode,oldVnode) {

console.log(el);

console.log(binding);

console.log(vnode);

console.log(oldVnode);

for (var i = 0; i < vnode.data.directives.length; i++) {

if (vnode.data.directives[i].name == "model") {

$(el).val(vnode.data.directives[i].value);

}

}

$(el).trigger("change");

}

});

html代码

select2

.example{

text-align: center;

padding:50px;

}

.content *{

text-align: left;

}

.select{

width: 160px;

}

结果：{{ value }}

var vueApp = new Vue({

el: "#vue-example",

data: {

value:["example2","example3"],

optionst: {

selectValue:[{"id":"example2","text":"example2"},{"id":"example3","text":"example3"}],

url: http://192.168.1.101/select2/selectExample

id: "NO",

name: "NAME"

}

}

});

应一些人的要求在代码中加入了默认值的代码