最简单的vue消息提示全局组件的方法

前端  /  管理员 发布于 4年前   433

简介

实现功能

• 自定义文本
• 自定义类型(默认，消息，成功，警告，危险)
• 自定义过渡时间

使用vue-cli3.0生成项目

toast全局组件编写

/src/toast/toast.vue

/src/toast/index.js

import vue from 'vue'import toastComponent from './toast.vue'// 组件构造器，构造出一个 vue组件实例const ToastConstructor = vue.extend(toastComponent)function showToast ({ text, type, duration = 2000 }) { const toastDom = new ToastConstructor({  el: document.createElement('div'),  data () {   return {    isShow: true, // 是否显示    text: text, // 文本内容    type: type // 类型   }  } }) // 添加节点 document.body.appendChild(toastDom.$el) // 过渡时间 setTimeout(() => {  toastDom.isShow = false }, duration)}// 全局注册function registryToast () { vue.prototype.$toast = showToast}export default registryToast

全局注册

/main.js

import toastRegistry from './toast/index'Vue.use(toastRegistry)

调用

/src/views/home.vue

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

您可能感兴趣的文章:

• Vue $mount实战之实现消息弹窗组件
• vue弹窗消息组件的使用方法
• 用Vue.extend构建消息提示组件的方法实例