点击三角形,展开或者收起内容
<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>
<template>
<div>
<div class="sort" @click="sortBtn">
更多排序
<i :class="{'el-icon-arrow-down':true,'rotate':flag}"></i>
</div>
<el-collapse-transition>
<ul v-show="flag">
<li v-for="(item,index) in list" :key="index" @click="btn(item)">{{item.lable}}</li>
</ul>
</el-collapse-transition>
</div>
</template>
<script>
export default {
data () {
return {
flag: false,
value: '',
list: [
{
value: '1',
lable: '优先级'
},
{
value: '2',
lable: '标题'
}
]
}
},
methods: {
sortBtn () {
this.flag = !this.flag
},
btn (val) {
console.log(val)
}
}
}
</script>
<style lang="less" scoped>
.sort {
position: relative;
cursor: pointer;
.el-icon-arrow-down {
position: absolute;
left: 70px;
top: 50%;
transform: translate(-50%, -50%);
transition: transform 0.3s ease-in-out;
}
.rotate {
transform: translate(-50%, -50%) rotate(180deg);
}
}
ul {
background: #fff;
width: 100px;
cursor: pointer;
li {
line-height: 26px;
border-bottom: 1px solid black;
text-align: center;
}
}
</style>