基于vue自定义封装 toast组件

骑猪看日落 2023-02-17 03:39 6阅读 0赞

### 自定义toast组件 ###

`原文首发：https://www.jianshu.com/p/0891ae3a7e6d`

在这里首先感谢博主的分享，公司项目中需要用到toast组件。  
利用空余时间，按照博主分享的内容，一步步实现了。  
以此当做学习记录一下。

> 第一步：在components/新建toast文件夹（存放：toast.vue 和 index.js）

`toast.vue`

<template>
      <div class="wrap" v-if="showWrap" :class="showContent ?'fadein':'fadeout'">{
       {text}}</div>
    </template>
    
    <style scoped>
      .wrap{
        position: fixed;
        left: 50%;
        top:50%;
        background: rgba(0,0,0,.35);
        padding: 10px;
        border-radius: 5px;
        transform: translate(-50%,-50%);
        color:#fff;
      }
      .fadein {
        animation: animate_in 0.25s;
      }
      .fadeout {
        animation: animate_out 0.25s;
        opacity: 0;
      }
      @keyframes animate_in {
        0% {
          opacity: 0;
        }
        100%{
          opacity: 1;
        }
      }
      @keyframes animate_out {
        0% {
          opacity: 1;
        }
        100%{
          opacity: 0;
        }
      }
    </style>

`index.js`

import vue from 'vue'
    
    // 这里就是我们刚刚创建的那个静态组件
    import toastComponent from './toast.vue'
    
    // 返回一个 扩展实例构造器
    const ToastConstructor = vue.extend(toastComponent)
    
    // 定义弹出组件的函数 接收2个参数, 要显示的文本 和 显示时间
    function showToast(text, duration = 2000) { 
      const toastDom = new ToastConstructor({ 
        el: document.createElement('div'),
        data() { 
          return { 
            text: text,
            showWrap: true,    // 是否显示组件
            showContent: true  // 作用:在隐藏组件之前,显示隐藏动画
          }
        }
      })
      document.body.appendChild(toastDom.$el)
    
      // 提前 250ms 执行淡出动画(因为我们再css里面设置的隐藏动画持续是250ms)
      setTimeout(() => {  toastDom.showContent = false }, duration - 1250)
      // 过了 duration 时间后隐藏整个组件
      setTimeout(() => {  toastDom.showWrap = false }, duration)
    }
    
    // 注册为全局组件的函数
    function registryToast() { 
      // 将组件注册到 vue 的 原型链里去,
      // 这样就可以在所有 vue 的实例里面使用 this.$toast()
      vue.prototype.$toast = showToast
    }
    
    export default registryToast

> 第二步：在项目入口文件 main.js中引入

// 引入自定义toast组件
    import toastRegistry from './components/toast/index'
    Vue.use(toastRegistry)

> 第三步：在页面中使用自定义toast组件

<template>
      <div id="app">
        <input type="button" value="显示弹窗" @click="showToast">
      </div>
    </template>
    
    <script>
      export default {
        methods: {
          showToast () {
            this.$toast('请填写用户名',3000)
          }
        }
      }
    </script>