时间:2021-05-26
目前,项目中使用了纯前端的静态项目+RESTFul接口的模式。为了更好的对数据进行操作,前端使用了vue2的mvvm功能,但是由于不是单页面应用,所以,并没有涉及到其它的如vue-route等功能,也未使用webpack等编译功能,所以,也没有使用.vue文件功能。这时候,如果用到控件,则多数从原jquery的组件中选择。
select下拉搜索选择
这次的需求调研与设计是原来做winform开发的同事,由于用惯了devexpress这个控件库,所以,对于searchlookupeditor这个控件情有独钟,所以,在设计的时候,许多地方都用到。
最初实现
最初,我使用了select2绑定select标签,设定其change事件 ,在事件中修改对应的vue的data值,同时,在vue中设定watch``data中被绑定的属性,属性值发生变化,则修改对应的dom的val,然后再触发select2的change事件。当然,这种对应关系,我在select标签上放了一个data-vuep来保存其与vue属性的对应关系,并放在全局的select2vue和dom2vue中。
为什么要用一个data-vuep来将数据与vue的属性关联呢,因为我发现,select2初始化了这个select标签之后,修改这个标签的值无法触发修改vue对应的v-model的属性。所以,只能用这个方法。
最终形成的结果是:
select2到vue.editor.P1:
1.select2被选择某一项,触发其change事件。
2.select2的change事件修改vue.editor.P1的值。
3.vue.editor.P1的值被修改,触发watch,watch又引发select2的change事件,但是,select2内部监控到选择和之前的一致,所以,不再执行change事件的委托。
上面这种流程一定程度是实现了数据的双向绑定,但是,非常复杂。在后续的使用中发现,在mounted中无法为select2默认值,必须在mounted中调用setTimeout生成一个定时执行的事件来执行数据绑定操作,才会触发上述流程,达到设定触始值的效果。
使用vue指令
经过一番挣扎,觉得上面这种方式还是不行。
上述方案不好的原因如下:
1.vue事件中的代码操作了dom,这样,在生命周期上可能会出现问题,特别是后来使用了setTimeout之后,生命周期变得更加不可控制。
2.每增加一个select组件,都需要增加 html标签、watch,而且,html 标签和watch既不是传统的写法,也不是vue的写法,而是发明了一种新的东西,这破坏了开发体验。
3.维护性比较差,当想删除一个select的时候,必须要去watch里面去找与html中data-vuep相等的属性监控方法,并将其删除掉。
4.兼容性不好,本方案选择将页面所有的select全部用select2初始化了一次,使得不论是否需要的,都会被影响;其次,如果不统一初始化,那么又多出了在mounted中为每一个select写初始化代码的工作,同时,也要为每个select取一个id。
为了解决这个问题,我又找到了最初看到的那个vue使用指令和select2的整合的例子。网上有好多,我不知道版权是谁的,姑且上我最先看到的那个吧。https:///ajax/libs/select2/4.0.3/js/select2.min.js"></script> <style type="text/css"> .content{ text-align: center; padding:50px; } .content *{ text-align: left; } .select{ width: 350px; } </style></head><body> <div class="content" id="vue-example"> <select class="select" v-select2='options' v-model="selectValue"></select> <br/> <span>结果:{{ selectValue }}</span> </div></body><script type="text/javascript"> 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) { $(el).trigger("change"); } }); var vueApp = new Vue({ 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' } ] } } });</script></html>
作者也说了,对vue2.x的双向绑定机制不了解,希望路过的大神帮帮忙。
我不是vue2的大神,甚至连新手都不算,只能说是初学者。我对代码进行了调整,当然,也是操作了dom,但是由于封装在指令里面了,使用人员不需要再次操作,不涉及到开发人员操作dom的情况,我还是可以接受的。
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 })); //说好的双向绑定,竟然不安套路 console.log("fire change in insert"); }); }, 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); console.log("new value in update:"+vnode.data.directives[i].value); } } $(el).trigger("change"); console.log("fire change in update"); } });//html代码<select v-select2="" v-model="editor.P1" required="required" class="form-control "> <option value=""></option> <option v-for="item in codes" v-bind:value="item.NAME">{{item.NAME}}</option></select>经过好几天的研究,终于我发现在作者原来的代码的update中,加入修改el的val值,然后再触发select2的change事件,就可以了。而在使用方面,只需要给加一个v-select2即可,v-model以及option的配置都依照vue2的推荐方式,原封不动。之所以加了一个空的option是因为如果不加,默认select2是选择第一个选项的,但是,由于未知原因,与vue.editor.P1并不同步。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
用select2插件,实现以下这个选择框:1、html代码预定义参数2、js代码$("#preParamDefine").select2({//data:dat
复制代码代码如下:functionmoveToRight(select1,select2)//把选中的移动到右边sleect1和sleect2分别是下拉列表框的
select2是一款jQuery插件,是普通form表单select组件的升级版。可以定制搜索、远程数据集(Remotedata,本篇主要介绍点)、无限滚动(数
在bootstrap的模态框里使用select2插件,会导致select2里的input输入框没有办法获得焦点,没有办法输入.解决方法:1.把页面中的tabin
1、新建两个文件夹,分别用于存放vue-cli2和vue-cli32、进入vue2文件夹下载安装vue-cli2.0vue-cli2.0版本下载命令为npmin