vue实现toast
Vue 实现 Toast 的方法
使用第三方库（推荐）
对于快速实现 Toast 功能，推荐使用成熟的第三方库如 vue-toastification 或 vant 的 Toast 组件。
安装 vue-toastification：
npm install vue-toastification在 Vue 项目中全局注册：
import Toast from 'vue-toastification'
import 'vue-toastification/dist/index.css'
const app = createApp(App)
app.use(Toast)使用示例：
this.$toast.success('操作成功')
this.$toast.error('操作失败')
this.$toast.info('提示信息')自定义 Toast 组件
如果需要完全自定义 Toast，可以创建一个独立的组件。
创建 Toast.vue 组件：
<template>
<div v-if="show" class="toast">
{{ message }}
</div>
</template>
<script>
export default {
data() {
return {
show: false,
message: ''
}
},
methods: {
showToast(msg, duration = 2000) {
this.message = msg
this.show = true
setTimeout(() => {
this.show = false
}, duration)
}
}
}
</script>
<style>
.toast {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 10px 20px;
background: rgba(0, 0, 0, 0.7);
color: white;
border-radius: 4px;
z-index: 9999;
}
</style>全局注册并使用：
// main.js
import Toast from './components/Toast.vue'
const app = createApp(App)
app.component('Toast', Toast)
// 在组件中使用
this.$refs.toast.showToast('自定义提示')使用 Vue 插件形式
将 Toast 封装为 Vue 插件，便于全局调用。
创建 toast-plugin.js：
const ToastPlugin = {
install(app) {
app.config.globalProperties.$toast = {
show(msg, duration = 2000) {
const toast = document.createElement('div')
toast.className = 'toast-message'
toast.textContent = msg
document.body.appendChild(toast)
setTimeout(() => {
document.body.removeChild(toast)
}, duration)
}
}
}
}
export default ToastPlugin注册插件：
import ToastPlugin from './toast-plugin'
const app = createApp(App)
app.use(ToastPlugin)使用方式：
this.$toast.show('插件式提示')使用 Composition API
对于 Vue 3 项目，可以使用 Composition API 实现响应式 Toast。
创建 useToast.js：
import { ref } from 'vue'
export function useToast() {
const toast = ref({
show: false,
message: ''
})
function showToast(msg, duration = 2000) {
toast.value.show = true
toast.value.message = msg
setTimeout(() => {
toast.value.show = false
}, duration)
}
return { toast, showToast }
}在组件中使用：
<template>
<div v-if="toast.show" class="toast">
{{ toast.message }}
</div>
</template>
<script setup>
import { useToast } from './useToast'
const { toast, showToast } = useToast()
// 调用示例
showToast('Composition API Toast')
</script>每种方法各有优缺点，第三方库功能最完善但灵活性较低，自定义组件和插件方式更灵活但需要自行处理更多细节。根据项目需求选择最适合的方案。
