手寫乙個彈窗元件 vue

2021-09-29 09:56:06 字數 1753 閱讀 5914

最近的專案中，需要自己去手寫乙個全域性的彈窗元件，在下面貼出自己的**。

元件寫的比較簡單  notice.vue

}
自定義元件的掛載   這裡用了兩種不同的形式，考慮到不同的元件需要特定的方法，比如notice元件只能是乙個單例的模式，所以用了乙個notice.js給他掛載，其他通用的元件可以採用第二種方式進行掛載。

1 將notice掛載到vue例項上，第一種方式

import notice from '@/components/notice.vue';


import vue from 'vue';


// 給notice 新增乙個建立組建例項的方法，可以動態編譯自身模版並掛載


notice.getinstance = props =>)


}}).$mount(); //執行掛載 ，若不置頂選擇器，則模版將被渲染為文件之外的 元素


// 必須使用原生的dom操作 插入到文件中


//獲取notice例項


const notice = instance.$children[0];


return notice;


}// 設計乙個單例模式，全域性範圍唯一建立乙個notice例項


let msginstance = null;


function getinstance() 


// 暴露介面


export default));


}}
第二種方式 是通用的元件掛載方式 類似與cube-ui自定義元件的方式

import vue from 'vue';


// 給notice 新增乙個建立組建例項的方法，可以動態編譯自身模版並掛載


function create(component,props) )


}}).$mount(); //執行掛載 ，若不置頂選擇器，則模版將被渲染為文件之外的 元素


// 必須使用原生的dom操作 插入到文件中


//獲取notice例項


const comp = instance.$children[0];


comp.remove = () => 


return comp;


}// 暴露介面


export default create;
在main.js呼叫

import notice from '@/components/notice.vue';

import notice from '@/services/notice.js';

vue.prototype.$notice = notice;

最後就是在使用這個彈窗元件

// 自定義的方式


this.$notice.info()
只需要在需要的地方呼叫這個方法就可以。

另外一種的呼叫方法

在你需要的元件中 引入 create.js

import create from '@/services/create';

import ballanim from '@/components/ballanim.vue';  //自己建立的元件

//建立例項，並呼叫


const anim = create(ballanim,);


//元件內自己的方法


anim.start();


anim.$on('transtioned', ()=>)

Vue 乙個元件引用另乙個元件

有些時候需要這麼做，比如，我想在首頁載入輪播元件，但是又不想全域性註冊 因為不是每個頁面都需要輪播功能 方法1 1 template 2 div 34 testcomponent testcomponent 5div 6template 78 script 9 1.先使用import匯入你要在該元件...

封裝vue的彈窗元件

先寫乙個工具函式,建立元件例項 建立指定元件例項並掛載於body上 import vue from vue export default function create component,props mount 更新操作 1.上面vm幫我們建立元件例項 2.通過 children獲取該元件例項 c...

手寫乙個Vue的資料繫結

class myvue observer val 利用object.keys 來迴圈出下標 object.keys val foreach keys defineproperty obj,key,value set newvalue document.queryselector text inner...