vue写一个全局Message组件

tigerZH 发布于2019-08-26 10:46 / 718人阅读

摘要：不知道大家在用一些框架，比如的时候，有没有觉得一些全局组件。看了的源码，自己也撸了一个。效果演示全局组件需要一个文件去注册这里的是用写的。

不知道大家在用一些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) // 创建的是一个组件构造器，不是实例
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元素渲染完成后执行回调
      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.调用方法

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

混合云私有云 vue组件 vue组件开发 vue父子组件通讯 vue轮播组件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/106746.html

Vue2.0 学习笔记

摘要：父子组件通信父组件通过向下传递数据给子组件，子组件通过给父组件发送消息。是一个对象而不是字符串数组时，它包含验证要求。状态管理由于多个状态分散的跨越在许多组件和交互间，大型应用的复杂度也随之增长。提供了，可以通过文档学习。什么是vue vue是一个前端框架，主要两个特点：数据绑定、组件化。安装环境根据教程安装环境：node.js、npm、webpack、vue-cli主要的命...

cgh1999520 2019-08-21 11:25 评论0 收藏0
使用vue自定义指令开发一个表单验证插件validate.js

摘要：今天就来介绍一下如何利用的自定义指令来开发一个表单验证插件的过程。按照这种方式就能够使用自己开发的这个表单校验插件。这段时间在进行一个新项目的前期搭建，新项目框架采用vue-cli3和typescirpt搭建。因为项目比较轻量，所以基本没有使用额外的ui组件，有时候我们需要的一些基础组件我就直接自己开发了。今天就来介绍一下如何利用vue的自定义指令directive来开发一个表单验证插件的过...

warnerwu 2019-05-23 17:26 评论0 收藏0
vue + typescript 进阶篇

摘要：进阶篇本文是继新项目起手式之后的进阶踩坑配置，所以推荐先行阅读前文完整阅读完之后，基本可以顺利在新项目中使用了另外特别注意不推荐在已有项目上强加，因写法的组件跟之前的组件不兼容，若上的话需要修改之前写的组件配置完整版可参考，若没配置出来 vue + typescript 进阶篇本文是继 Vue + TypeScript 新项目起手式之后的进阶+踩坑配置，所以推荐先行阅读前文 ...

lemanli 2019-08-21 17:28 评论0 收藏0
深入解析Vue源码

摘要：你可以使用的方法传入指令和定义对象来注册一个全局自定义指令。深度数据观察如果你希望在一个对象上使用自定义指令，并且当对象内部嵌套的属性发生变化时也能够触发指令的函数，那么你就要在指令的定义中传入。 Vue简介数据绑定 /** *假设有这么两个钟东西 **/ //数据 var object = { message: Hello World! } //DOM {{ messag...

weapon 2019-08-20 18:31 评论0 收藏0
Vue中你不知道但却很实用的黑科技

摘要：最近数月一直投身于的开源工作中，完成了大大小小多个组件，在组件化开发中积累了不少经验。在开发全局提示组件通知提醒组件对话框组件时，内部都是使用来渲染，但却是来隐式地创建这些实例，这样我们就可以像标题这样使用，但其内部还是通过来管理。最近数月一直投身于 iView 的开源工作中，完成了大大小小 30 多个 UI 组件，在 Vue 组件化开发中积累了不少经验。其中也有很多带有技巧性和黑科...

Heier 2019-08-22 10:47 评论0 收藏0