vue2组件之select2调用

最新推荐文章于 2024-08-16 09:49:36 发布

dfihnkvp27775

最新推荐文章于 2024-08-16 09:49:36 发布

阅读量1.2k

点赞数

文章标签： javascript 前端 webpack ViewUI

原文链接：http://www.cnblogs.com/ensleep/p/vue-select2.html

版权

本文介绍了在Vue2项目中如何实现select2下拉搜索选择的双向绑定。最初通过监听change事件和data-vuep关联，但存在复杂性和生命周期问题。后来采用Vue指令的方式封装，简化HTML和Watch，提高代码可维护性。文中提供了具体实现代码和注意事项。

摘要由CSDN通过智能技术生成

目前，项目中使用了纯前端的静态项目+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中。

//mounted中的部分代码
                        select2vue = {};
                    $("select").each(function (index, item) {
                        var s2 = $(item).select2({
                            language: "zh-CN",  //设置 提示语言
                            width: "100%", //设置下拉框的宽度
                            theme: "classic",
                            placeholder: "请选择"
                        }).on("change", function (e) {
                            console.log(e);
                            var v = $(e.target).val();
                            var p = $(e.target).attr("data-vuep");
                            eval("vue_cust_busi." + p + "='" + v + "';");
                            //$(e.target).find("option").attr("selected",false)