訊息彈框元件,預設3秒後自動關閉,可設定info/success/warning/error型別
效果圖:
檔案目錄:
index.js給vue新增$my_message
方法,
判斷引數,使用$mount()
給元件手動掛載引數,然後將元件插入頁面中
import vue from 'vue'
import message from './message.vue'
const messagebox = vue.extend(message)
message.install = function (options, type)
} else if (typeof options === 'string' || typeof options === 'number')
if (type != undefined && options != null)
} let instance = new messagebox().$mount()
vue.nexttick(() => )
}export default message
在main.js裡全域性引入
import message from '@/components/common/message'
vue.prototype.$my_message = message.install;
引數名型別
說明content
string
內容time
number
消失時間,預設3秒後消失
type
string
info/success/warning/error,預設info
hasclose
boolean
是否含關閉按鈕,預設false
頁面中呼叫
//簡寫,第乙個引數為內容,第二個為型別
this.$my_message('這是乙個message');
this.$my_message('這是乙個warning','warning');
//傳參的方式
this.$my_message();
Vue元件 自定義全域性元件
vue兩大核心 1.資料驅動介面改變 2.元件化 什麼是元件?什麼是元件化?在前端開發中元件就是把乙個很大的介面拆分成多個小的介面,每乙個小的介面就是乙個元件 將大介面拆分成小介面就是元件化 元件化的好處 1.可以簡化vue例項的 2.可以提高復用性 如何建立元件 三步 let profile vu...
自定義Vue 全域性元件
在 components 下建立自己的元件 primary click show 儲存 資料提交 visible.sync isok width 500px center footer class dialog footer isok false 取 消 primary click submit 確...
vue學習 自定義全域性vue元件
文件目錄 components loading 元件資料夾 loading.vue loading元件核心 index.js 配置匯出元件,並且install 主要配置到處檔案index.js import loadingcomponent from loading.vue 引用元件檔案 定義並註冊...