当前位置：首页 > VUE

vue实现伸缩栏

2026-01-19 22:22:14VUE

Vue 实现伸缩栏的方法

使用 CSS 和 Vue 数据绑定

通过 Vue 的数据绑定和 CSS 过渡效果实现伸缩栏。定义一个布尔值控制伸缩状态，结合 CSS 的 transition 属性实现平滑动画。

<template>
  <div>
    <button @click="toggleCollapse">切换伸缩</button>
    <div :class="{ 'collapsed': isCollapsed }" class="expandable-panel">
      伸缩内容区域
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isCollapsed: false
    };
  },
  methods: {
    toggleCollapse() {
      this.isCollapsed = !this.isCollapsed;
    }
  }
};
</script>

<style>
.expandable-panel {
  width: 200px;
  height: 200px;
  background: #f0f0f0;
  transition: all 0.3s ease;
}
.collapsed {
  height: 0;
  overflow: hidden;
}
</style>

使用 Vue 过渡组件

利用 Vue 内置的 <transition> 组件实现更丰富的动画效果。可以通过 name 属性自定义过渡类名，结合 CSS 定义动画。

<template>
  <div>
    <button @click="toggleCollapse">切换伸缩</button>
    <transition name="slide">
      <div v-if="!isCollapsed" class="expandable-panel">
        伸缩内容区域
      </div>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isCollapsed: false
    };
  },
  methods: {
    toggleCollapse() {
      this.isCollapsed = !this.isCollapsed;
    }
  }
};
</script>

<style>
.expandable-panel {
  width: 200px;
  height: 200px;
  background: #f0f0f0;
}
.slide-enter-active, .slide-leave-active {
  transition: height 0.3s ease;
}
.slide-enter, .slide-leave-to {
  height: 0;
  overflow: hidden;
}
</style>

动态调整宽度或高度

如果需要动态调整宽度或高度，可以通过绑定样式对象实现。使用 Vue 的 :style 绑定动态计算属性或数据属性。

<template>
  <div>
    <button @click="toggleWidth">切换宽度</button>
    <div :style="{ width: panelWidth + 'px' }" class="expandable-panel">
      伸缩内容区域
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      panelWidth: 200
    };
  },
  methods: {
    toggleWidth() {
      this.panelWidth = this.panelWidth === 200 ? 50 : 200;
    }
  }
};
</script>

<style>
.expandable-panel {
  height: 200px;
  background: #f0f0f0;
  transition: width 0.3s ease;
}
</style>

使用第三方库（如 Element UI）

如果项目中使用 Element UI 等组件库，可以直接调用其提供的折叠面板组件，快速实现伸缩功能。

<template>
  <el-collapse v-model="activeNames">
    <el-collapse-item title="伸缩栏标题" name="1">
      伸缩内容区域
    </el-collapse-item>
  </el-collapse>
</template>

<script>
export default {
  data() {
    return {
      activeNames: ['1']
    };
  }
};
</script>