亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

vue寫一個(gè)全局Message組件

tigerZH / 887人閱讀

摘要：不知道大家在用一些框架，比如的時(shí)候，有沒有覺得一些全局組件?？戳说脑创a，自己也擼了一個(gè)。效果演示全局組件需要一個(gè)文件去注冊這里的是用寫的。

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

效果演示


全局組件需要一個(gè)index.js文件去注冊

BlogMessage.vue

這里的script是用ts寫的。大家只需將這里稍做修改就可以了
index.js 
import Vue from "vue"
import BlogMessage from "./BlogMessage.vue"
const MessageBox = Vue.extend(BlogMessage) // 創(chuàng)建的是一個(gè)組件構(gòu)造器，不是實(shí)例
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");
  }

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

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

相關(guān)文章

  • Vue2.0 學(xué)習(xí)筆記

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

    cgh1999520 評論0 收藏0

  • 使用vue自定義指令開發(fā)一個(gè)表單驗(yàn)證插件validate.js

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

    warnerwu 評論0 收藏0

  • vue + typescript 進(jìn)階篇

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

    lemanli 評論0 收藏0

  • 深入解析Vue源碼

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

    weapon 評論0 收藏0

  • Vue中你不知道但卻很實(shí)用的黑科技

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

    Heier 評論0 收藏0

發(fā)表評論

0條評論

最新活動(dòng)
閱讀需要支付1元查看
<