记录一个小技巧,在vue中实现点击按钮之后向左的箭头旋转为向下的箭头
<el-button type="primary" size="small" @click="addDefind">新增</el-button>
<div class="iconBox" :style="[{transform:isActive ? 'rotate(90deg)' : ''}]">
<i class="el-icon-arrow-right"></i>
</div>
在data里面设置 isActive: false
export default {
name: "",
components:{},
data() {
return {
isActive: false,
};
},
}
点击事件
addDefind(){
this.isActive = !this.isActive;
},
css样式
.iconBox {
display: inline-block;
position: absolute;
width: 20px;
height: 20px;
transition: transform 0.5s;
-moz-transition: -moz-transform 0.5s; /* Firefox 4 */
-webkit-transition: -webkit-transform 0.5s; /* Safari 和 Chrome */
-o-transition: -o-transform 0.5s;
}