这篇文章主要介绍“Vue封装全局toast组件的应用”，在日常操作中，相信很多人在Vue封装全局toast组件的应用问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”Vue封装全局toast组件的应用”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！
目录
前言
一. 借助 vue-cli
定义 Toast 组件
在 main.js 里面配置
在其他组件内使用
二、不借助 vue-cli
注册 toast 组件
注册 toast 插件
在其他组件内使用
前言
最近体验了下Vue，Toast都是前端常用组件，本文详细介绍了Vue封装全局toast组件的过程，下面话不多说了，来一起看看详细的介绍吧
一. 借助 vue-cli
1. 定义 Toast 组件
// components/Toast<template> <transition name="fade"> <div v-show="visible">{{message}}</div> </transition></template><script>export default { data () { return { visible: false, message: '' } }}</script><style scoped>div { position: fixed; top: 30%; left: 50%; padding: 5px 20px; color: #fff; background-color: #424242; border-radius: 5px; text-align: center; transform: translate(-50%, -50%);}.fade-enter-active,.fade-leave-active { transition: opacity .5s;}.fade-enter, .fade-leave-to { opacity: 0;}</style>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 = falsenew Vue({ render: h => h(App),}).$mount('#app')3. 在其他组件内使用
<template> <div class="hello"> <h2>{{ msg }}</h2> </div></template><script>export default { name: 'HelloWorld', data: () => { return { msg: 'HelloWord' } }, mounted () { // 使用 toast 组件 this.$toast('组件挂载成功') }}</script>二、不借助 vue-cli
在借助 vue-cli 的情况下，可以方便实现组件的导入导出，但是在不借助构建工具的情况下，就需要使用其他方法了
1. 注册 toast 组件
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="./static/vue/vue.min.js"></script></head><body> <div id="app"> <my-button></my-button> </div> <div id="toast"></div> <script> // 定义 toast 全局组件 const Toast = Vue.component('toast', { data() { return { isShow: false, message: '全局提示', wrapperStyle: { position: 'fixed', top: '20%', left: '50%', zIndex: 10000, padding: '6px 12px', backgroundColor: '#424242', borderRadius: '5px', transform: 'translate(-50%, -50%)' }, textStyle: { color: '#fff', fontSize: '14px' } } }, template: `<div v-show="isShow" :> <span :>{{ message }}</span> </div>` })2. 注册 toast 插件
// 定义插件对象const ToastObj = { install: function (Vue) { // 创建一个 toast 组件实例,并挂载到一个元素上 const instance = new Toast() // 将这个实例挂载到DOM中 instance.$mount('#toast') // 在Vue的原型链上注册方法，控制组件 Vue.prototype.$toast = ({message, duration = 2000} = {}) => { instance.message = message instance.isShow = true setTimeout(() => { instance.isShow = false }, duration) } }}// 注册 toast 插件Vue.use(ToastObj)3. 在其他组件内使用
Vue.component('my-button', { data() { return { wrapperStyle: { width: '70px', padding: '20px', backgroundColor: 'green' }, textStyle: { color: '#fff', fontSize: '16px' } } }, methods: { handleClick() { this.$toast({ message: '我点击了' }) } }, template: `<div : @click="handleClick"> <span :>点击提示</span> </div>` }) const vm = new Vue({ el: '#app' }) </script></body></html>到此，关于“Vue封装全局toast组件的应用”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注编程网网站，小编会继续努力为大家带来更多实用的文章！
