vue2.x select2 指令封裝詳解
本文介紹了vue2.x select2 指令封裝,分享給大家,具體如下:
其他的就不說了,說說封裝過程的問題吧
1、vue不同版本指令接受參數(shù)不一樣
2、醬油君對于vue2.x雙向綁定的機(jī)制不了解(有大神路過望在評論中不吝賜教)
上代碼:
<!DOCTYPE html> <html> <head> <title>vue select2 封裝</title> <link rel="external nofollow" 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> <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>結(jié)果:{{ 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>
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
使用el-upload組件實(shí)現(xiàn)遞歸多文件上傳的全過程
el-upload組件文件上傳都是每個(gè)文件請求一次接口,本次實(shí)現(xiàn)一次請求上傳多個(gè)文件,下面這篇文章主要給大家介紹了關(guān)于使用el-upload組件實(shí)現(xiàn)遞歸多文件上傳的相關(guān)資料,需要的朋友可以參考下2023-03-03關(guān)于vuex的數(shù)據(jù)持久化處理方式
這篇文章主要介紹了關(guān)于vuex的數(shù)據(jù)持久化處理方式,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10Vue AST的轉(zhuǎn)換實(shí)現(xiàn)方法講解
本節(jié),我們將討論關(guān)于AST的轉(zhuǎn)換。所謂AST的轉(zhuǎn)換,指的是對AST進(jìn)行一系列操作,將其轉(zhuǎn)換為新的AST的過程。新的AST可以是原語言或原DSL的描述,也可以是其他語言或其他DSL的描述。例如,我們可以對模板AST進(jìn)行操作,將其轉(zhuǎn)換為JavaScriptAST2023-01-01vue實(shí)現(xiàn)氣泡運(yùn)動(dòng)撞擊效果
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)氣泡運(yùn)動(dòng)撞擊效,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-08-08使用vue3重構(gòu)拼圖游戲的實(shí)現(xiàn)示例
這篇文章主要介紹了使用vue3重構(gòu)拼圖游戲的實(shí)現(xiàn)示例,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01vue使用i18n實(shí)現(xiàn)國際化的方法詳解
這篇文章主要給大家介紹了關(guān)于vue使用i18n如何實(shí)現(xiàn)國際化的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09