点击三角形,展开或者收起内容
<template>
<div>
<div class="zhankai" @click="btn()">
展开 <span :class="{'sanjiao':true,'rotate':flag}"></span>
</div>
<!-- 展示或者收起 -->
<el-collapse-transition>
<div v-show="flag">
123321213321312
</div>
</el-collapse-transition>
</div>
</template>
<script>
export default {
data () {
return {
flag: true
}
},
methods: {
btn () {
this.flag = !this.flag
}
}
}
</script>
<style lang="less" scoped>
.zhankai {
margin-left: 100px;
position: relative;
.sanjiao {
width: 0;
height: 0;
border-style: solid;
border-width: 0 4px 6px 4px;
border-color: transparent transparent #333 transparent;
position: absolute;
left: 36px;
top: 50%;
transform: translate(-50%, -50%);
transition: transform 0.3s ease-in-out;
}
.rotate {
transform: translate(-50%, -50%) rotate(180deg);
}
&:hover {
color: #1890ff;
.sanjiao {
border-color: transparent transparent #1890ff transparent;
}
// 只要滑过三角形就旋转,放开这个代码
// .rotate {
// transform: translate(-50%, -50%) rotate(180deg);
// }
}
}
</style>