一：在專案中建立乙個plugins\toastmessage\index.vue檔案
class="wrap
" v-if="
showwrap
" :class="
showcontent ?'fadein':'fadeout'
">}
二：在該目錄下建立index.js檔案
import vue from'vue'//
這裡就是我們剛剛建立的那個靜態元件
import toastcomponent from
'./index.vue'//
返回乙個 擴充套件例項構造器, 關於 vue.extend 有不懂的同學,可以去檢視以下官方文件
#vue-extend
const toastconstructor =vue.extend(toastcomponent)
//定義彈出元件的函式 接收2個引數, 要顯示的文字 和 顯示時間
function showtoast(text, duration = 2000
) }
})//
把 例項化的 toast.vue 新增到 body 裡
//提前 250ms 執行淡出動畫(因為我們再css裡面設定的隱藏動畫持續是250ms)
settimeout(() => , duration - 250)
//過了 duration 時間後隱藏整個元件
settimeout(() => , duration)}//
註冊為全域性元件的函式
export function registrytoast()
export
default showtoast
三：main.js進行引用
import from'./plugins/toastmessage'//
message 提示訊息外掛程式
vue.use(registrytoast)
四：vue檔案中使用
this.$toast('
訊息');
五：js檔案中使用
import showtoast from'../plugins/toastmessage';
showtoast('訊息
');
vue專案中封裝Toast外掛程式
模板 用來設定顯示的位置，css布局，資料之類的 方法 可以在想用的地方隨時呼叫 建立乙個toast外掛程式 可以在到處呼叫 還是需要這個模板的 外掛程式裡用的方法或者資料都是在這個模板中 一般都是使用方法 import toast from toast const obj 需要在main.js中先...
封裝成外掛程式 Toast
需求 經常會有提示框，多個頁面使用，但是提示框的大小 icon圖示等會變化。思路 多個頁面使用，可以封裝成全域性元件。但是需要多次引人標籤，有點繁瑣。this.refs.tip.showtoast import toast from toast const obj obj.install funct...
Vue中封裝input元件
最近有點忙不過來 脫了很久，沒有更新 抱歉。今天要將的時如何自定義封裝input元件 博主知識發個簡單的模板 碼友們可以更具自己的實際專案新增需要的引數 我的專案中的ui圖是這樣的 如下 子元件的模板設定 completion input box input box name type text r...