vue实现collapse手风琴组件展开和收缩
前言
vue-cli搭建项目中使用
Element-ui
和iview
库的collapse
组件时发现都不能很好的符合功能需求,所以打算自己实现
演示
代码
html代码
<div style="border-top:1px solid #f7f9fc;border-bottom:1px solid #f7f9fc">
<!-- 每层item -->
<div style="border-bottom:1px solid #f7f9fc;" class="pl5 pr5">
<div
class="flex-ac flex-j-between"
style="min-height:60px;"
@click="setChooseCollapse($event)"
>
<span
:class="
collapseBtnList[0] ===
choose
? 'title span-click'
: 'title span-lose'
"
>{{ collapseBtnList[0] }}</span
>
<Icon
type="md-arrow-dropleft"
size="20"
:class="
collapseBtnList[0] ===
choose
? 'triangle-route triangle-animation'
: 'triangle-animation triangle-base'
"
/>
</div>
<!-- 内容 -->
<p
:class="
collapseBtnList[0] === choose
? 'content-show content-animation'
: 'content-hidden content-animation'
"
style="overflow:hidden;"
>
内容
</p>
</div>
<!-- 每层item -->
<div style="border-bottom:1px solid #f7f9fc;" class="pl5 pr5">
<div
class="flex-ac flex-j-between"
style="min-height:60px;"
@click="setChooseCollapse($event)"
>
<span
:class="
collapseBtnList[1] ===
choose
? 'title span-click'
: 'title span-lose'
"
>{{ collapseBtnList[1] }}</span
>
<Icon
type="md-arrow-dropleft"
size="20"
:class="
collapseBtnList[1] ===
choose
? 'triangle-route triangle-animation'
: 'triangle-animation triangle-base'
"
/>
</div>
<!-- 内容 -->
<p
:class="
collapseBtnList[1] === choose
? 'content-show content-animation'
: 'content-hidden content-animation'
"
style="overflow:hidden;"
>
内容
</p>
</div>
<!-- 每层item -->
<div style="border-bottom:1px solid #f7f9fc;" class="pl5 pr5">
<div
class="flex-ac flex-j-between"
style="min-height:60px;"
@click="setChooseCollapse($event)"
>
<span
:class="
collapseBtnList[2] ===
choose
? 'title span-click'
: 'title span-lose'
"
>{{ collapseBtnList[2] }}</span
>
<Icon
type="md-arrow-dropleft"
size="20"
:class="
collapseBtnList[2] ===
choose
? 'triangle-route triangle-animation'
: 'triangle-animation triangle-base'
"
/>
</div>
<!-- 内容 -->
<p
:class="
collapseBtnList[2] === choose
? 'content-show content-animation'
: 'content-hidden content-animation'
"
style="overflow:hidden;"
>
内容
</p>
</div>
<!-- 每层item -->
<div style="border-bottom:1px solid #f7f9fc;" class="pl5 pr5">
<div
class="flex-ac flex-j-between"
style="min-height:60px;"
@click="setChooseCollapse($event)"
>
<span
:class="
collapseBtnList[3] ===
choose
? 'title span-click'
: 'title span-lose'
"
>{{ collapseBtnList[3] }}</span
>
<Icon
type="md-arrow-dropleft"
size="20"
:class="
collapseBtnList[3] ===
choose
? 'triangle-route triangle-animation'
: 'triangle-animation triangle-base'
"
/>
</div>
<!-- 内容 -->
<p
:class="
collapseBtnList[3] === choose
? 'content-show content-animation'
: 'content-hidden content-animation'
"
style="overflow:hidden;"
>
内容
</p>
</div>
</div>
javascript代码
<script>
const collapseBtnList = ['按钮1', '按钮2', '按钮3', '按钮4'] // 折叠面板的按钮文本
export default {
data() {
return {
collapseBtnList,
choose: collapseBtnList[0], // 点击的collapse Item编号
}
},
methods: {
setChooseCollapse(el) {
let chooseCurrent = el.target.textContent
this.choose = chooseCurrent
}
},
watch: {},
created() {
},
mounted() {
},
}
</script>
样式代码
<style lang="scss" scoped>
// collapse内容显示
.content-show {
height: 90px;
}
// collapse内容隐藏
.content-hidden {
height: 0px;
}
// 添加内容高度变化时动画
.content-animation {
// transition-property: height;
// transition-duration: 0.15s;
// transition-timing-function: cubic-bezier(0, 0.1, 0.15, 1);
// transition-delay: 0.15s;
transition: height 0.15s cubic-bezier(0, 0.1, 0.15, 1) 0.15s;
-moz-transition: height 0.15s cubic-bezier(0, 0.1, 0.15, 1) 0.15s; /* Firefox 4 */
-webkit-transition: height 0.15s cubic-bezier(0, 0.1, 0.15, 1) 0.15s; /* Safari 和 Chrome */
-o-transition: height 0.15s cubic-bezier(0, 0.1, 0.15, 1) 0.15s; /* Opera */
}
// 三角旋转
.triangle-route {
transform: rotate(-90deg);
-ms-transform:rotate(-90deg); /* IE 9 */
-webkit-transform:rotate(-90deg); /* Safari and Chrome */
color: #222222;
}
// 三角默认
.triangle-base {
color: #cccccc;
}
// 三角旋转动画
.triangle-animation {
// transition-property: all;
// transition-duration: 0.15s;
// transition-timing-function: cubic-bezier(0, 0.1, 0.15, 1);
// transition-delay: 0.15s;
transition: all 0.15s cubic-bezier(0, 0.1, 0.15, 1) 0.15s;
-moz-transition: all 0.15s cubic-bezier(0, 0.1, 0.15, 1) 0.15s; /* Firefox 4 */
-webkit-transition: all 0.15s cubic-bezier(0, 0.1, 0.15, 1) 0.15s; /* Safari 和 Chrome */
-o-transition: all 0.15s cubic-bezier(0, 0.1, 0.15, 1) 0.15s; /* Opera */
}
// 文本默认
.title {
font-size: 16px;
font-weight: bold;
}
// 点击collapse时的文本变化
.span-click {
color: #212121;
}
// 点击其他collapse时的文本变化
.span-lose {
color: #888888;
}
</style>
引入的Icon
组件来自iview design
库
html代码中所使用的 global.scss部分样式
.pl5 {
padding-left: 5px;
}
.pr5 {
padding-right: 5px;
}
.flex-ac {
display: flex;
align-items: center;
}
.flex-j-between {
display: flex;
justify-content: space-between;
}
最后
根据所贴出的代码可复现功能
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步