vue寫一個全局Message組件

tigerZH 發(fā)布于2019-08-26 10:46 / 816人閱讀

摘要：不知道大家在用一些框架，比如的時候，有沒有覺得一些全局組件。看了的源碼，自己也擼了一個。效果演示全局組件需要一個文件去注冊這里的是用寫的。

不知道大家在用一些UI框架，比如Element-ui的時候，有沒有覺得一些全局組件。this.$message(),this.Toast()等，用起來很爽。他們不像其他的組件，需要去導入，去注冊。麻煩的很。
看了Element的源碼，自己也擼了一個。其中包括了以前沒有接觸過的插件知識，哎，感覺自己對Vue的理解還是不夠，只停留在了使用的這階段。需要更多的往深層次的地方去鉆。不說廢話了，直接上代碼。

效果演示

全局組件需要一個index.js文件去注冊

BlogMessage.vue

這里的script是用ts寫的。大家只需將這里稍做修改就可以了

index.js

import Vue from "vue"
import BlogMessage from "./BlogMessage.vue"
const MessageBox = Vue.extend(BlogMessage) // 創(chuàng)建的是一個組件構造器，不是實例
const Message = {
  install: (options, type, duration) => {
    if (options === undefined || options === null) {
      options = {
        content: ""
      }
    } else if (typeof options === "string" || typeof options === "number") {
      options = {
        content: options
      }
      if (type != undefined && options != null) {
        options.type = type;
      }
    }
    let instance = new MessageBox({
      data: options
    }).$mount()
    document.body.appendChild(instance.$el) // 添加dom元素
    Vue.nextTick(() => { // dom元素渲染完成后執(zhí)行回調(diào)
      instance.visible = true
    })
  }
}
Vue.prototype.$message = Message.install;
["success", "error"].forEach(type => {
  Vue.prototype.$message[type] = (content) => {
    return Vue.prototype.$message(content, type)
  }
})
export default Message

使用組件

1.全局注冊

import Vue from "vue";
import Message from "@/components/common/message";
Vue.use(Message);

2.調(diào)用方法

  private test1() {
    this.$message("這是一條普通消息");
  }
  private test2() {
    this.$message.success("這是一條成功消息");
    // this.$message("這是一條成功消息", "success");
  }
  private test3() {
    this.$message.error("這是一條失敗消息");
    // this.$message("這是一條失敗消息", "error");
  }

GPU云服務器云服務器 vue組件 vue組件開發(fā) vue父子組件通訊 vue輪播組件

文章版權歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/106746.html

Vue2.0 學習筆記

摘要：父子組件通信父組件通過向下傳遞數(shù)據(jù)給子組件，子組件通過給父組件發(fā)送消息。是一個對象而不是字符串數(shù)組時，它包含驗證要求。狀態(tài)管理由于多個狀態(tài)分散的跨越在許多組件和交互間，大型應用的復雜度也隨之增長。提供了，可以通過文檔學習。什么是vue vue是一個前端框架，主要兩個特點：數(shù)據(jù)綁定、組件化。安裝環(huán)境根據(jù)教程安裝環(huán)境：node.js、npm、webpack、vue-cli主要的命...

cgh1999520 2019-08-21 11:25 評論0 收藏0
使用vue自定義指令開發(fā)一個表單驗證插件validate.js

摘要：今天就來介紹一下如何利用的自定義指令來開發(fā)一個表單驗證插件的過程。按照這種方式就能夠使用自己開發(fā)的這個表單校驗插件。這段時間在進行一個新項目的前期搭建，新項目框架采用vue-cli3和typescirpt搭建。因為項目比較輕量，所以基本沒有使用額外的ui組件，有時候我們需要的一些基礎組件我就直接自己開發(fā)了。今天就來介紹一下如何利用vue的自定義指令directive來開發(fā)一個表單驗證插件的過...

warnerwu 2019-05-23 17:26 評論0 收藏0
vue + typescript 進階篇

摘要：進階篇本文是繼新項目起手式之后的進階踩坑配置，所以推薦先行閱讀前文完整閱讀完之后，基本可以順利在新項目中使用了另外特別注意不推薦在已有項目上強加，因?qū)懛ǖ慕M件跟之前的組件不兼容，若上的話需要修改之前寫的組件配置完整版可參考，若沒配置出來 vue + typescript 進階篇本文是繼 Vue + TypeScript 新項目起手式之后的進階+踩坑配置，所以推薦先行閱讀前文 ...

lemanli 2019-08-21 17:28 評論0 收藏0
深入解析Vue源碼

摘要：你可以使用的方法傳入指令和定義對象來注冊一個全局自定義指令。深度數(shù)據(jù)觀察如果你希望在一個對象上使用自定義指令，并且當對象內(nèi)部嵌套的屬性發(fā)生變化時也能夠觸發(fā)指令的函數(shù)，那么你就要在指令的定義中傳入。 Vue簡介數(shù)據(jù)綁定 /** *假設有這么兩個鐘東西 **/ //數(shù)據(jù) var object = { message: Hello World! } //DOM {{ messag...

weapon 2019-08-20 18:31 評論0 收藏0
Vue中你不知道但卻很實用的黑科技

摘要：最近數(shù)月一直投身于的開源工作中，完成了大大小小多個組件，在組件化開發(fā)中積累了不少經(jīng)驗。在開發(fā)全局提示組件通知提醒組件對話框組件時，內(nèi)部都是使用來渲染，但卻是來隱式地創(chuàng)建這些實例，這樣我們就可以像標題這樣使用，但其內(nèi)部還是通過來管理。最近數(shù)月一直投身于 iView 的開源工作中，完成了大大小小 30 多個 UI 組件，在 Vue 組件化開發(fā)中積累了不少經(jīng)驗。其中也有很多帶有技巧性和黑科...

Heier 2019-08-22 10:47 評論0 收藏0