Toast 轻提示
1、Toast vue代码
<template>
<div class="toast" v-on:click="onToast">
<!-- 文字提示 -->
<div class="toast_text">
<p>{{text}}</p>
</div>
</div>
</template>
<script>
export default {
props: {
text: String
},
methods: {
onToast () {
this.$emit('onToast')
}
}
}
</script>
<style scoped>
.toast{
width: 70vw;height: 100vh;
position: fixed;
top: 0;left: 15vw;
display: flex;
align-items: center;
justify-content: center;
}
/* 文字提示样式 */
.toast_text{
background-color: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
}
.toast_text>p{
margin: 0.1rem;
color: white;
text-align: center;
}
</style>
2、Toast vue逻辑代码
export default {
components: {
Toast
},
data () {
return {
// 提示框显示隐藏
isToast: false,
// 文本提示内容
text:'文本提示内容'
}
},
methods: {
// 点击显示提示内容
onClick () {
this.isToast = true
// 三秒后关闭提示内容
setTimeout(() =>{
this.isToast = false
},3000);
}
}
}
@ cc