当前位置：首页 > VUE

vue实现面板收缩效果

2026-01-22 12:31:40VUE

Vue 实现面板收缩效果

使用 v-show 和 v-if 控制显示

在 Vue 中，可以利用 v-show 或 v-if 指令来控制面板的显示与隐藏。v-show 通过 CSS 的 display 属性切换，适合频繁切换的场景；v-if 会直接销毁或重建 DOM 节点，适合不频繁切换的场景。

<template>
  <div>
    <button @click="togglePanel">Toggle Panel</button>
    <div v-show="isPanelVisible">
      This is the panel content.
    </div>
  </div>
</template>

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

结合 CSS 过渡动画

通过 Vue 的 <transition> 组件，可以为面板的收缩和展开添加平滑的过渡效果。需要定义对应的 CSS 过渡类名。

<template>
  <div>
    <button @click="togglePanel">Toggle Panel</button>
    <transition name="slide">
      <div v-show="isPanelVisible" class="panel">
        This is the panel content.
      </div>
    </transition>
  </div>
</template>

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

<style>
.panel {
  padding: 10px;
  background: #f0f0f0;
  margin-top: 10px;
}

.slide-enter-active, .slide-leave-active {
  transition: max-height 0.5s ease;
}

.slide-enter, .slide-leave-to {
  max-height: 0;
  overflow: hidden;
}

.slide-enter-to, .slide-leave {
  max-height: 100px;
}
</style>

使用动态组件

如果需要切换多个面板，可以使用动态组件 <component> 结合 is 属性，动态加载不同的组件。

<template>
  <div>
    <button @click="currentPanel = 'PanelA'">Show Panel A</button>
    <button @click="currentPanel = 'PanelB'">Show Panel B</button>
    <component :is="currentPanel" />
  </div>
</template>

<script>
import PanelA from './PanelA.vue';
import PanelB from './PanelB.vue';

export default {
  components: { PanelA, PanelB },
  data() {
    return {
      currentPanel: 'PanelA'
    };
  }
};
</script>

使用第三方库

对于更复杂的面板收缩效果，可以借助第三方库如 vue-collapse 或 element-ui 的折叠面板组件。

<template>
  <el-collapse v-model="activePanel">
    <el-collapse-item title="Panel 1" name="1">
      Content for Panel 1
    </el-collapse-item>
    <el-collapse-item title="Panel 2" name="2">
      Content for Panel 2
    </el-collapse-item>
  </el-collapse>
</template>

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

自定义指令实现

如果需要更灵活的控制，可以自定义指令来实现面板的收缩效果。

vue实现面板收缩效果

<template>
  <div>
    <button v-collapse="'panel'">Toggle Panel</button>
    <div ref="panel" class="panel">
      This is the panel content.
    </div>
  </div>
</template>

<script>
export default {
  directives: {
    collapse: {
      inserted(el, binding, vnode) {
        const target = vnode.context.$refs[binding.value];
        el.addEventListener('click', () => {
          target.style.display = target.style.display === 'none' ? 'block' : 'none';
        });
      }
    }
  }
};
</script>

以上方法可以根据具体需求选择，实现面板的收缩与展开效果。