vue項目中獨立封裝一個toast提示彈框組件

我們在進行vue項目開發的時候,封裝組件是必不可少的一個環節;我們也可以使用別人一些已經寫好的ui組件庫。但別人的實現原理我們還是有必要知道的,今天我就來分享一個我獨立封裝的toast彈框組件

1、首先可以創建一個toast文件夾,用來放toast組件和它的js文件
在這裏插入圖片描述2、然後在main.js文件中引入toast的js文件, 並將toast插件安裝到Vue實例中,也就是掛載到實例中;
在這裏插入圖片描述3、一旦寫了 Vue.use() 後,它就會去 toast 的js文件裏執行 install函數;
注意:use 括號中的toast 相當於是個形參 它代表着 js 文件中的 obj 這個對象
在這裏插入圖片描述最後一句是將 創建出來的組件對象掛載到 vue實例的原型對象上, 然後就在任意組件中都可以 以 this.$toast 的形式來調用

在這裏插入圖片描述這是在 Toats 組件中寫的一些主要東西,也就是彈框顯示的內容 以及彈框的函數,樣式可以根據自己的喜好來修改;

在這裏插入圖片描述這就是調用的方法 直接 this.$toast.show() 的形式來調用,裏面的參數都是自己任意傳的,如果不傳也會有默認值;
在這裏插入圖片描述如圖所示,當我點擊按鈕的時候,它就會彈出個提示框,也就成功了!

如果我有些地方沒寫明白或寫的不好,大家可以私信我,歡迎和大夥討論!

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章