思路很简单:
样式思路:
1.设置一个一定大小的盒子,然后给盒子设置背景颜色,再设置文字颜色,再来个固定定位脱离文档流就好了。
代码逻辑思路:
设置一个属性,控制toast弹出的状态显示与否,然后在设置个定时器,过一定事件,修改toast组件为不可见即可。
代码:
<template> <div class="toast" v-show="isShow"> <div>{{message}}</div> </div> </template> <script> export default{ name:'Toast', props:{ // message:{ // type:String, // default:'' // } }, data(){ return{ message:'', isShow:false } }, methods: { show(message,duration=2000){ this.isShow = true; this.message = message; setTimeout(() => { this.isShow = false; this.message = ''; },duration) } }, } </script> <style scoped> .toast{ position: fixed; top:50%; left:50%; /* 根据自己本身宽高偏移 */ transform: translate(-50%,-50%); padding:8px 10px; color: #fff; background-color: rgba(0, 0, 0, 0.7); z-index: 999; } </style>