本文介绍了vue2。x select2指令封装,分享给大家,具体如下:
其他的就不说了,说说封装过程的问题吧
1, vue不同版本指令接受参数不一样
2,酱油君对于vue2。x双向绑定的机制不了解(有大神路过望在评论中不吝赐教)
上代码:
& lt; !DOCTYPE html>
& lt; html>
& lt; head>
& lt; title> vue select2封装& lt;/title>
& lt;链接的href=" https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css " rel=巴獠縩ofollow”rel="样式表"/比;
& lt;脚本src=" https://unpkg.com/vue/dist/vue.js "祝辞& lt;/script>
& lt;脚本src=" https://cdn.bootcss.com/jquery/2.2.4/jquery.js "祝辞& lt;/script>
& lt;脚本src=" https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js "祝辞& lt;/script>
& lt;风格类型=" text/css "比;
.content {
text-align:中心;
填充:50 px;
}
.content * {
text-align:左;
}
.select {
宽度:350 px;
}
& lt;/style>
& lt;/head>
& lt; body>
& lt; div类="内容" id=皏ue-example”比;
& lt;选择类="选择" v-select2='选项' v模型=皊electValue祝辞& lt;/select>
& lt; br/比;
& lt; span>结果:{{selectValue}} & lt;/span>
& lt;/div>
& lt;/body>
& lt;脚本type=" text/javascript祝辞
Vue。指令(select2, {
插入:函数(el、绑定vnode) {
让选项=绑定。值| | {};
美元(el) .select2(选项)。(“select2:选择”,(e)=比;{//v模型寻找//桓雒氨涓铩钡氖录?/桓鲇胧粜灾德肪丁癳vent.target.value美元”
埃尔。dispatchEvent(新事件(“改变”,{目标:e。目标}));//说好的双向绑定,竟然不安套路
});
}，
更新:函数(el、绑定vnode) {
美元(el) .trigger(“改变”);
}
});
var vueApp=new Vue ({
埃尔:“# vue-example”,
数据:{
selectValue:“你还没有选值”,
选择:{
数据:[
{id: 0,文本:“增强”},
{id: 1、文本:“bug”},
{id: 2、文本:“复制”},
{id: 3、文本:“无效”},
{id: 4、文本:“wontfix”}
]
}
}
});
& lt;/script>
& lt;/html>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
