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

更新时间：2021年07月13日 11:18:03 作者：_kyz

组件(Component)是 Vue.js 最强大的功能之一,组件可以扩展 HTML 元素,封装可重用的代码,这篇文章主要给大家介绍了关于Vue封装全局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%);
}
/* vue动画过渡效果设置 */
.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 = false

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

3. 在其他组件内使用

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </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" :style="wrapperStyle">
                  <span :style="textStyle">{{ 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 :style="wrapperStyle" @click="handleClick">
                  <span :style="textStyle">点击提示</span>
                </div>`
    })

    const vm = new Vue({
      el: '#app'
    })
  </script>
</body>
</html>

总结

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

您可能感兴趣的文章:

vue项目登录成功拿到令牌跳转失败401无登录信息的解决
这篇文章主要介绍了vue项目登录成功拿到令牌跳转失败401无登录信息的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-02-02
axios向后台传递数组作为参数的方法
今天小编就为大家分享一篇axios向后台传递数组作为参数的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-08-08
Vue中props组件和slot标签的区别
props 和 slot 在 Vue 中的作用略有不同，props 更多地用于父子组件之间的数据传递，而 slot 则更多地用于组件的复用和扩展。感兴趣的同学可以参考阅读
2023-04-04
Vue 3 + Element Plus树形表格全选多选及子节点勾选的问题解决方
在本文中,我们解决了Vue 3和Element Plus树形表格中的全选、多选、子节点勾选和父节点勾选等常见问题,通过逐步实现这些功能,您可以构建功能强大且用户友好的树形表格组件,以满足各种数据展示需求,对Vue 3 Element Plus树形表格相关知识感兴趣的朋友一起看看吧
2023-12-12
Vue2.0中三种常用传值方式(父传子、子传父、非父子组件传值)
在Vue的框架开发的项目过程中，经常会用到组件来管理不同的功能，有一些公共的组件会被提取出来。下面通过本文给大家介绍Vue开发中常用的三种传值方式父传子、子传父、非父子组件传值，需要的朋友参考下吧
2018-08-08
vue中手机号,邮箱正则验证以及60s发送验证码的实例
下面小编就为大家分享一篇vue中手机号,邮箱正则验证以及60s发送验证码的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-03-03
Vue2 响应式系统之异步队列
这篇文章主要介绍了Vue2 响应式系统之异步队列，文章基于Vue2 的相关资料展开对主题的详细介绍，具有一定的参考价值需要的小伙伴可以参考一下
2022-04-04
Vue + Echarts页面内存占用高的问题解决方案
点击左侧的菜单可以切换不同的看板,有些看板页面中的报表比较多,用户多次切换后页面的内存占用可以上升为GB级,严重时导致页面内存溢出,使得页面崩溃,极大影响了用户体验,本文给大家介绍Vue + Echarts页面内存占用高的问题解决方案,感兴趣的朋友一起看看吧
2024-02-02
Vue3系列教程之插槽slot详解
插槽（slot）可以说在一个 Vue 项目里面处处都有它的身影，比如我们使用一些UI 组件库的时候，我们通常可以使用插槽来自定义我们的内容，今天通过本文给大家介绍vue3插槽slot的相关知识，感兴趣的朋友一起看看吧
2022-08-08
vue父子组件之间的传参的几种方式小结
本文主要介绍了vue父子组件之间的传参的几种方式小结，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-04-04