好资源导航 » 文章资讯 » vue2.x select2 指令封装详解

vue2.x select2 指令封装详解

2023-09-23 08:28:05 62

本文介绍了vue2.xselect2指令封装，分享给大家，具体如下：

其他的就不说了，说说封装过程的问题吧

1、vue不同版本指令接受参数不一样

2、酱油君对于vue2.x双向绑定的机制不了解（有大神路过望在评论中不吝赐教）

上代码：




vueselect2封装





.content{
text-align:center;
padding:50px;
}
.content*{
text-align:left;
}
.select{
width:350px;
}







结果：{{selectValue}}

Vue.directive('select2',{ inserted:function(el,binding,vnode){ letoptions=binding.value||{}; $(el).select2(options).on("select2:select",(e)=>{ //v-modellooksfor //-aneventnamed"change" //-avaluewithpropertypath"$event.target.value" el.dispatchEvent(newEvent('change',{target:e.target}));//说好的双向绑定，竟然不安套路 }); }, update:function(el,binding,vnode){ $(el).trigger("change"); } }); varvueApp=newVue({ el:"#vue-example", data:{ selectValue:'你还没有选值', options:{ data:[ {id:0,text:'enhancement'}, {id:1,text:'bug'}, {id:2,text:'duplicate'}, {id:3,text:'invalid'}, {id:4,text:'wontfix'} ] } } });

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
514930285
czq8825@qq.com

vue2.x select2 指令封装详解

热门推荐

随机推荐