vue展开收起功能实现
Vue 展开收起功能实现
使用 v-show 或 v-if 控制显示隐藏
通过 Vue 的指令 v-show 或 v-if 可以轻松实现展开收起功能。v-show 通过 CSS 的 display 属性控制元素显示隐藏，适合频繁切换的场景；v-if 会直接销毁和重建 DOM，适合不频繁切换的场景。
<template>
<div>
<button @click="toggle">点击{{ isExpanded ? '收起' : '展开' }}</button>
<div v-show="isExpanded">
这里是需要展开收起的内容
</div>
</div>
</template>
<script>
export default {
data() {
return {
isExpanded: false
}
},
methods: {
toggle() {
this.isExpanded = !this.isExpanded
}
}
}
</script>使用 transition 添加动画效果
通过 Vue 的 <transition> 组件可以为展开收起添加平滑的动画效果。
<template>
<div>
<button @click="toggle">点击{{ isExpanded ? '收起' : '展开' }}</button>
<transition name="fade">
<div v-show="isExpanded">
这里是需要展开收起的内容
</div>
</transition>
</div>
</template>
<script>
export default {
data() {
return {
isExpanded: false
}
},
methods: {
toggle() {
this.isExpanded = !this.isExpanded
}
}
}
</script>
<style>
.fade-enter-active, .fade-leave-active {
transition: opacity 0.5s, max-height 0.5s;
max-height: 500px;
overflow: hidden;
}
.fade-enter, .fade-leave-to {
opacity: 0;
max-height: 0;
}
</style>使用第三方库如 vue-collapse
对于更复杂的展开收起需求，可以使用第三方库如 vue-collapse。安装后可以直接使用其提供的组件。
npm install vue-collapse --save<template>
<div>
<button @click="toggle">点击{{ isExpanded ? '收起' : '展开' }}</button>
<vue-collapse v-model="isExpanded">
<div>
这里是需要展开收起的内容
</div>
</vue-collapse>
</div>
</template>
<script>
import VueCollapse from 'vue-collapse'
export default {
components: {
VueCollapse
},
data() {
return {
isExpanded: false
}
},
methods: {
toggle() {
this.isExpanded = !this.isExpanded
}
}
}
</script>动态控制内容高度
通过动态绑定样式，可以实现内容高度的平滑过渡。
<template>
<div>
<button @click="toggle">点击{{ isExpanded ? '收起' : '展开' }}</button>
<div :style="{ height: isExpanded ? 'auto' : '0', overflow: 'hidden', transition: 'height 0.5s' }">
这里是需要展开收起的内容
</div>
</div>
</template>
<script>
export default {
data() {
return {
isExpanded: false
}
},
methods: {
toggle() {
this.isExpanded = !this.isExpanded
}
}
}
</script>使用 CSS 的 max-height 实现动画
通过设置 max-height 可以实现更平滑的展开收起动画，避免内容高度不确定的问题。
<template>
<div>
<button @click="toggle">点击{{ isExpanded ? '收起' : '展开' }}</button>
<div class="content" :class="{ 'expanded': isExpanded }">
这里是需要展开收起的内容
</div>
</div>
</template>
<script>
export default {
data() {
return {
isExpanded: false
}
},
methods: {
toggle() {
this.isExpanded = !this.isExpanded
}
}
}
</script>
<style>
.content {
max-height: 0;
overflow: hidden;
transition: max-height 0.5s ease;
}
.content.expanded {
max-height: 500px;
}
</style>以上方法可以根据具体需求选择适合的方式实现展开收起功能。
