vue 实现toast
Vue 实现 Toast 的方法
使用第三方库（推荐）
安装 vue-toastification 或其他流行库：
npm install vue-toastification在 main.js 中引入并配置：
import Toast from 'vue-toastification'
import 'vue-toastification/dist/index.css'
const options = {
timeout: 3000,
position: 'top-right'
}
Vue.use(Toast, options)在组件中使用：
this.$toast.success('操作成功')
this.$toast.error('操作失败')
this.$toast.info('提示信息')手动实现 Toast 组件
创建 Toast.vue 组件：
<template>
<div v-if="show" class="toast" :class="type">
{{ message }}
</div>
</template>
<script>
export default {
data() {
return {
show: false,
message: '',
type: 'info'
}
},
methods: {
display(message, type = 'info', duration = 3000) {
this.message = message
this.type = type
this.show = true
setTimeout(() => {
this.show = false
}, duration)
}
}
}
</script>
<style>
.toast {
position: fixed;
top: 20px;
right: 20px;
padding: 12px 24px;
border-radius: 4px;
color: white;
z-index: 9999;
}
.toast.info {
background-color: #2196F3;
}
.toast.success {
background-color: #4CAF50;
}
.toast.error {
background-color: #F44336;
}
</style>在 main.js 中全局注册：
import Vue from 'vue'
import Toast from './components/Toast'
const toast = new Vue(Toast).$mount()
document.body.appendChild(toast.$el)
Vue.prototype.$toast = {
info: (msg, duration) => toast.display(msg, 'info', duration),
success: (msg, duration) => toast.display(msg, 'success', duration),
error: (msg, duration) => toast.display(msg, 'error', duration)
}使用 Vue 插件方式
创建 toast.js 插件：
const ToastPlugin = {
install(Vue) {
const ToastConstructor = Vue.extend(ToastComponent)
const toastInstance = new ToastConstructor().$mount()
document.body.appendChild(toastInstance.$el)
Vue.prototype.$toast = {
show(message, type = 'info', duration = 3000) {
toastInstance.show(message, type, duration)
}
}
}
}
export default ToastPlugin在 main.js 中使用插件：
import ToastPlugin from './plugins/toast'
Vue.use(ToastPlugin)注意事项
- 考虑添加动画效果提升用户体验
- 处理多个 Toast 同时显示的情况
- 在移动端适配不同屏幕尺寸
- 提供自定义样式选项
以上方法可根据项目需求选择，第三方库通常提供更全面的功能和更好的兼容性，手动实现则更加灵活可控。
