vue自定义全局组件 - 提示框组件

该组件挂载在Vue原型上，通过调用方法显示隐藏提示框，并定义了三种状态：加载、警告及成功

1、定义组件Toast.vue，以便extend方法使用

2、Toast.js编写组件的主要逻辑

import ToastCom from './Toast.vue'const Toast = {}    // 定义插件对象
// Vue的install方法，用于定义vue插件
Toast.install = function (Vue) {// 使用Vue构造器，创建“子类”const ToastConstructor = Vue.extend(ToastCom)// 实例化const instance = new ToastConstructor()// el官方注解：// 提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标。可以是 CSS 选择器，也可以是一个 HTMLElement 实例。// 在实例挂载之后，元素可以用 vm.$el 访问。// 如果在实例化时存在这个选项，实例将立即进入编译过程，否则，需要显式调用 vm.$mount() 手动开启编译// 提供的元素只能作为挂载点。所有的挂载元素会被 Vue 生成的 DOM 替换。因此不推荐挂载 root 实例到  或者  上。// 挂载到元素上;$el访问元素并插入到body中instance.$mount(document.createElement('div'))document.body.appendChild(instance.$el)// Vue原型上添加显示方法，以便全局调用Vue.prototype.$$showToast = (options = {}) => {if (this.toastTimer) clearTimeout(this.toastTimer)// 通过传入的props改变组件中的属性来显示不同提示效果以及显示时间intance.title = options.title || ''instance.show = options.show !== falseinstance.icon = options.icon || 'loading'this.toastTimer = setTimeout(() => {instance.show = false}, options.duration || 2000)}// Vue原型添加隐藏方法Vue.prototype.$$hideToast = function () {// this.$$showToast({ show: false })instance.show = false}
}export default Toast

3、最后在main.js中全局注册

import Toast from '@components/plugin/toast/Toast.js'Vue.use(Toast)

然后就可以在项目中全局使用

this.$$showToast()    // 默认加载
this.$$showToast({title: '标题', icon: 'success'})
this.$$showToast({title: '标题', icon: 'success', duration: 5000})
this.$$hideToast()    // 隐藏toast

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！