我习惯自己写组件，内存小，加载快。必要时我会引入插件，并剔除多余的文件，希望这个小功能可以帮到你一些。 组件特征： （1）在触发某方法时弹出轻提示； （2）在1.7秒延迟后自动消失； （3）点击取消键可以立即消失； （4）再次单击再次弹出； （5）弹出消失都有动画效果。
子组件：
代码语言：javascript复制<template>
<view class="app">
<view class="box" :class="[Tips.light===exit?'pointOut':'']">
<text>{{Tips.text}}</text>
<img @click="cancel()" src="https://img-blog.csdnimg.cn/20210320142320188.png" alt="" class="box-icon">
</view>
</view>
</template>
<script>
export default {
data() {
return {
exit:true //是否隐藏轻提示
}
},
methods:{
cancel(){
this.exit = false;
setTimeout(()=>{
this.exit = true;
},1500)
}
},
props:["Tips"]
}
</script>
<style lang="less">
.app{
.box{
display:flex;
justify-content:space-between;
align-items:center;
position:fixed;
top:50rpx;
left:0;right:0;
margin:auto;
z-index:20;
width:88vw;
height:0rpx;
padding:0 30rpx;
box-sizing:border-box;
background-color:#fff;
opacity:0;
box-shadow: 0px 6px 16px 0px rgba(48, 48, 48, 0.2);
border-bottom:4rpx #F54D4F solid;
border-radius: 12rpx;
font-size:36rpx;
letter-spacing: 2rpx;
.box-icon{
width:30rpx;
height:30rpx;
}
}
}
.pointOut{
animation:visible .5s forwards,hidden .5s forwards 1.7s;
}
.hidd{
animation:hidden .5s forwards;
}
@keyframes visible{
from{height:0rpx;opacity:0;transform:translateY(0rpx);}
to{height:100rpx;opacity:1;transform:translateY(90rpx);}
}
@keyframes hidden{
from{height:100rpx;opacity:1;transform:translateY(90rpx);}
to{height:0rpx;opacity:0;transform:translateY(0rpx);}
}
</style>父组件：
代码语言：javascript复制<template>
<view>
<lightTips :Tips="tips"></lightTips>
<view @click="popup()">轻提示</view>
</view>
</template>
<script>
import lightTips from './组件路径'
export default{
data(){
return{
tips:{text:'留言发送失败，请重新试试',light:false},//请提示
}
},
methods:{
popup(){
if(!this.tips.light){
this.tips.light = true;
setTimeout(()=>{
this.tips.light = false;
},2200)
}
}
},
components:{lightTips}
}
</script>
<style>
</style>到底了！原创不易，转载请注明出处。
前端的学习不是一蹴而就，不积跬步无以至千里，不积小流无以成江海。持续不断的努力才能让你我有所收获，我常常把源码放在文章里，注释却并不很多，喜欢探索的人自会明白其中道理，自学也是人生的一门必修课。
不辜负每一份真情，不嘲笑每一个正在努力的人，力所能及的对别人施以援手，每天都要强化自己，洗去铅华才能绽放光芒。
