最简单的vue消息提示全局组件的方法
时间：2021-12-24 11:06:47|栏目：vue|点击： 次
简介
实现功能
- 自定义文本
- 自定义类型(默认，消息，成功，警告，危险)
- 自定义过渡时间
使用vue-cli3.0生成项目
toast全局组件编写
/src/toast/toast.vue
<template>
<div class="app-toast"
v-if="isShow"
:class="{'info': type=== 'info','success': type=== 'success','wraning': type=== 'wraning','danger': type=== 'danger'}">{{text}}</div>
</template>
<style scoped>
.app-toast {
position: fixed;
left: 50%;
top: 50%;
background: #ccc;
padding: 10px;
border-radius: 5px;
transform: translate(-50%, -50%);
color: #fff;
}
.info {
background: #00aaee;
}
.success {
background: #00ee6b;
}
.wraning {
background: #eea300;
}
.danger {
background: #ee000c;
}
</style>
/src/toast/index.js
import vue from 'vue'
import toastComponent from './toast.vue'
// 组件构造器，构造出一个 vue组件实例
const ToastConstructor = vue.extend(toastComponent)
function showToast ({ text, type, duration = 2000 }) {
const toastDom = new ToastConstructor({
el: document.createElement('div'),
data () {
return {
isShow: true, // 是否显示
text: text, // 文本内容
type: type // 类型
}
}
})
// 添加节点
document.body.appendChild(toastDom.$el)
// 过渡时间
setTimeout(() => {
toastDom.isShow = false
}, duration)
}
// 全局注册
function registryToast () {
vue.prototype.$toast = showToast
}
export default registryToast
全局注册
/main.js
import toastRegistry from './toast/index' Vue.use(toastRegistry)
调用
/src/views/home.vue
<template>
<div class="home">
<input type="button"
value="显示弹窗"
@click="showToast">
</div>
</template>
<script>
export default {
name: 'home',
methods: {
showToast () {
this.$toast({
text: '我是消息'
// type: 'wraning',
// duration: 3000
})
}
}
}
</script>
