在实习的过程中老是遇见很多盒子点击的时候需要变色后面又要还原回来原来的颜色,可是不是用button按钮就可以了嘛,可是button样式改起来没有view方便刚好可以把这个功能写出来直接上代码吧:
<template>
<view class="box" :style="StyleType" @click="dianji()"><!-- sryle样式声明-->
点击我
</view>
</template>
<script>
export default{
data(){
return{
StyleType:{
background: '#aaaaff'//初始颜色
}
}
},
methods:{
dianji(){
this.StyleType.background="#ffaa00" //点击时的颜色
setTimeout(()=>{
this.StyleType.background="#aaaaff"
},150) //点击后返回原来的颜色
}
}
}
</script>
<style lang="scss" scoped>
.box{
width: 100%;
height: 350rpx;
display: flex;
justify-content: center;
align-items: center;
// background-color: #aaaaff;
}
</style>
这样就可以点击后变色然后通过定时器setTimeout设置0.15秒后返回原来的颜色即可完成这个操作。