告别繁琐，轻松封装 Vue 全局 Toast 组件

SEO 关键词

SEO

---

1. 借助 Vue CLI 封装全局 Toast 组件

1.1 定义 Toast 组件

• 创建一个新的 Vue 项目。
• 在 src 目录下创建一个名为 Toast.vue 的文件。
• 在 Toast.vue 文件中，添加以下代码：

<template>
  <div class="toast" v-show="show">
    {{ message }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: false,
      message: ''
    }
  },
  methods: {
    show(message) {
      this.show = true;
      this.message = message;
      setTimeout(() => {
        this.show = false;
      }, 3000);
    }
  }
}
</script>

<style>
.toast {
  position: fixed;
  top: 10px;
  right: 10px;
  padding: 10px;
  background-color: #333;
  color: #fff;
  border-radius: 5px;
  z-index: 9999;
}
</style>

1.2 在 main.js 里面配置

• 在 src 目录下的 main.js 文件中，添加以下代码：

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

Vue.component('toast', Toast)

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

1.3 在其他组件内使用

• 在需要使用 Toast 组件的其他组件中，添加以下代码：

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

export default {
  methods: {
    showToast(message) {
      this.$refs.toast.show(message)
    }
  },
  components: {
    Toast
  }
}

• 在需要显示 Toast 组件的地方，添加以下代码：

<toast ref="toast"></toast>

2. 不借助 Vue CLI 封装全局 Toast 组件

2.1 在借助 vue

• 在 src 目录下创建一个名为 Toast.js 的文件。
• 在 Toast.js 文件中，添加以下代码：

export default {
  install(Vue, options) {
    const Toast = Vue.extend({
      data() {
        return {
          show: false,
          message: ''
        }
      },
      methods: {
        show(message) {
          this.show = true;
          this.message = message;
          setTimeout(() => {
            this.show = false;
          }, 3000);
        }
      }
    })

    const instance = new Toast()
    instance.$mount(document.createElement('div'))
    document.body.appendChild(instance.$el)

    Vue.prototype.$toast = instance
  }
}

2.2 在 main.js 文件中引入并使用 Toast 插件

• 在 src 目录下的 main.js 文件中，添加以下代码：

import Vue from 'vue'
import App from './App.vue'
import Toast from './plugins/Toast.js'

Vue.use(Toast)

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

2.3 在其他组件内使用

• 在需要使用 Toast 组件的其他组件中，添加以下代码：

export default {
  methods: {
    showToast(message) {
      this.$toast.show(message)
    }
  }
}

• 在需要显示 Toast 组件的地方，添加以下代码：

<div v-if="$toast.show">{{ $toast.message }}</div>

结语

封装一个全局 Toast 组件可以帮助我们在 Vue 项目中更轻松地显示通知和反馈信息。这篇文章介绍了两种实现方法：一种是借助 Vue CLI，另一种是不借助 Vue CLI。我希望这篇文章对您有所帮助，如果您有任何问题或建议，欢迎随时与我联系。