Vue 自定義全域性訊息框元件

2022-07-24 13:51:18 字數 1488 閱讀 2398

訊息彈框元件,預設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 引用元件檔案 定義並註冊...