引入布局文件
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
/**
* select2封装
*/
Vue.directive('select2', {
inserted: function (el, binding, vnode) {
let options = binding.value || {}; $(el).select2(options).on("select2:select", (e) => {
// v-model looks for
// - an event named "change"
// - a value with property path "$event.target.value"
el.dispatchEvent(new Event('change', {target: e.target})); //说好的双向绑定，竟然不安套路 });
},
update: function (el, binding, vnode) {
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"); }
}); /*使用案例*/
/*
<select v-select2="" v-model="sale.carNum" required="required" class="form-control select">
<option value=""></option>
<option v-for="item in options.carId" :value="item.value">{{item.text}}</option>
</select>
*/