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

下面是关于“Vue封装全局toast组件的完整实例”的详细攻略：

一、需求描述

我们需要封装一个可全局使用的 toast 组件，并且需要支持以下功能：

1. 可以显示文字和图标
2. 可以设置显示时间和位置
3. 支持自定义样式

二、准备工作

在开始封装 toast 组件之前，我们需要先准备好 Vue 项目：

1. 安装 Vue：使用命令 npm install vue 或 yarn add vue 安装 Vue
2. 创建一个 Toast.vue 文件：该文件将作为我们自定义的 toast 组件的核心文件
3. 在项目中全局注册该组件，并在需要使用的地方调用

三、实现步骤

1. 编写Toast.vue文件

首先，在 Toast.vue 文件中，我们需要定义 toast 的基本样式和结构。在这里，我们将使用 Element UI 的 Message 组件作为基础，对其进行自定义加工。代码如下：

<template>
  <div :class="['el-message', 'toast-position-' + position, type]">
    <i :class="['el-message__icon', 'el-icon-' + icon]" v-if="icon"></i>
    <div class="el-message__content">
      <p v-if="!!slot">{{ slot }}</p>
      <p v-else>{{ message }}</p>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    message: {
      type: String,
      default: ''
    },
    type: {
      type: String,
      default: 'info'
    },
    icon: {
      type: String,
      default: ''
    },
    slot: {
      type: String,
      default: ''
    },
    position: {
      type: String,
      default: 'bottom'
    },
    duration: {
      type: Number,
      default: 2500
    }
  },
  data () {
    return {
      isShow: false
    }
  },
  watch: {
    isShow (isShow) {
      if (isShow) {
        setTimeout(() => {
          this.close()
        }, this.duration)
      }
    }
  },
  methods: {
    show () {
      this.isShow = true
    },
    close () {
      this.isShow = false
      this.$destroy()
      this.$el.parentNode.removeChild(this.$el)
    }
  },
  mounted () {
    document.body.appendChild(this.$el)
    this.show()
  }
}
</script>

<style>
.el-message {
  position: fixed;
  width: 300px;
  left: 50%;
  z-index: 9999;
  border-radius: 4px;
  padding: 15px 20px;
  box-sizing: border-box;
  color: #fff;
  font-size: 14px;
  -webkit-transform: translate(-50%, 0);
          transform: translate(-50%, 0);
  opacity: 0;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}

.el-icon-success {
  color: #67c23a;
}

上述代码中，我们定义了 toast 的基本结构，并设置了一些默认参数。同时，我们也定义了 show 和 close 方法，用于显示和关闭 toast，并实现了 watch 属性，用于监听 toast 是否需要自动关闭。

2. 注册全局组件

接下来，我们需要将 Toast.vue 文件注册为全局组件，以便在任何地方都可以调用 toast。在项目入口文件 main.js 中，添加以下代码：

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

function createToast (props) {
  const Instance = new Vue({
    render: h => h(Toast, { props })
  })

  Instance.$mount()

  return Instance.$children[0]
}

Vue.prototype.$toast = (msg, type = 'info', duration = 2500) => {
  const toast = createToast({
    message: msg,
    type,
    duration
  })

  toast.$on('close', () => {
    document.body.removeChild(toast.$el)
    toast.$destroy()
  })
}

上述代码中，我们使用 Vue.prototype 扩展了 $toast 方法，该方法接收三个参数：消息内容、类型、持续时间。同时，我们调用 createToast 方法，创建一个 toast 实例，并将参数传递给它。

最后，我们使用 $on 监听 toast 实例的 close 事件，实现关闭 toast 的功能。

四、使用示例

在上述步骤完成之后，我们就可以在任何地方使用 $toast 方法了。以下是两个简单的示例：

示例一：普通提示

this.$toast('普通提示')

上述代码会在页面底部弹出一个普通提示，持续时间为 2.5 秒。

示例二：自定义样式

this.$toast('进度提示', 'info', 5000, {
  icon: 'loading',
  type: 'success'
})

上述代码会在页面底部弹出一个带有进度条的成功提示，持续时间为 5 秒，同时会显示一个加载图标。