Vue封装全局toast组件的完整实例

目录

• 前言
  
• 一. 借助 vue-cli
  
• 1. 定义 Toast 组件
• 2. 在 main.js 里面配置
• 3. 在其他组件内使用
• 二、不借助 vue-cli
  
• 1. 注册 toast 组件
• 2. 注册 toast 插件
• 3. 在其他组件内使用
• 总结

前言

最近体验了下Vue，Toast都是前端常用组件，本文详细介绍了Vue封装全局toast组件的过程，下面话不多说了，来一起看看详细的介绍吧

一. 借助 vue-cli

1. 定义 Toast 组件

// components/Toast

2. 在 main.js 里面配置

import Vue from 'vue'
import App from './App.vue'
import Toast from './components/Toast'

// 定义插件对象
const ToastObj = {
  install: function (Vue) {
    // 创建一个Vue的“子类”组件
    const ToastConstructor = Vue.extend(Toast)
    // 创建一个该子类的实例,并挂载到一个元素上
    const instance = new ToastConstructor()
    console.log(instance)
    // 将这个实例挂载到动态创建的元素上,并将元素添加到全局结构中
    instance.$mount(document.createElement('div'))
    document.body.appendChild(instance.$el)

    // 在Vue的原型链上注册方法，控制组件
    Vue.prototype.$toast = (msg, duration = 1500) => {
      instance.message = msg
      instance.visible = true
      setTimeout(() => {
        instance.visible = false
      }, duration)
    }
  }
}
Vue.use(ToastObj)

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

3. 在其他组件内使用

二、不借助 vue-cli

 在借助 vue-cli 的情况下，可以方便实现组件的导入导出，但是在不借助构建工具的情况下，就需要使用其他方法了

1. 注册 toast 组件

总结

到此这篇关于Vue封装全局toast组件的文章就介绍到这了,更多相关Vue封装全局toast组件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！