当前位置：首页 > VUE

vue实现slidetoggle

2026-01-13 01:09:06VUE

Vue 实现 SlideToggle 效果

在 Vue 中实现类似 jQuery 的 slideToggle 效果，可以通过 Vue 的过渡系统结合 CSS 动画或 JavaScript 钩子完成。以下是两种常见实现方式：

使用 Vue Transition 和 CSS

Vue 的 <transition> 组件配合 CSS 过渡属性可实现滑动效果：

<template>
  <div>
    <button @click="toggle">Toggle Slide</button>
    <transition name="slide">
      <div v-if="isVisible" class="content">可滑动的内容</div>
    </transition>
  </div>
</template>

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

<style>
.slide-enter-active, .slide-leave-active {
  transition: max-height 0.5s ease;
  overflow: hidden;
}
.slide-enter-from, .slide-leave-to {
  max-height: 0;
}
.slide-enter-to, .slide-leave-from {
  max-height: 1000px; /* 调整为实际内容高度 */
}
</style>

使用动态样式绑定

通过动态计算高度并绑定样式实现更精确的控制：

<template>
  <div>
    <button @click="toggle">Toggle Slide</button>
    <div ref="content" class="content" :style="{ height: currentHeight }">
      可滑动的内容
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return { isOpen: false, currentHeight: '0px' };
  },
  methods: {
    toggle() {
      this.isOpen = !this.isOpen;
      this.currentHeight = this.isOpen 
        ? `${this.$refs.content.scrollHeight}px` 
        : '0px';
    }
  }
};
</script>

<style>
.content {
  overflow: hidden;
  transition: height 0.3s ease;
}
</style>

使用第三方库

若需更复杂效果，可引入专门库：

vue实现slidetoggle

VueUse 的 useTransition：

import { useTransition } from '@vueuse/core';
const height = useTransition(0, { duration: 300 });

vue-slide-toggle 插件：

<slide-toggle>
  <div>内容</div>
</slide-toggle>

注意事项

使用 max-height 时需设置足够大的值以容纳内容。
动态高度方案需通过 scrollHeight 获取实际内容高度。
过渡动画的性能可通过 will-change: max-height 优化。

标签: vue slidetoggle

分享给朋友：

vue实现详情

Vue 实现详情页的常见方法使用动态路由在 Vue Router 中配置动态路由参数，通过 $route.params 获取详情 ID。示例路由配置： { path: '/detail/:i…

vue el 实现

Vue 中使用 Element UI (el) 的实现方法 Element UI 是一个基于 Vue 的组件库，提供丰富的 UI 组件，常用于快速构建企业级中后台产品。以下介绍 Vue 项目中集成和使…

自实现vue

实现 Vue 的核心功能要实现一个简化版的 Vue，需要理解其核心功能：数据响应式、模板编译、虚拟 DOM 和组件系统。以下是关键步骤的分解：数据响应式 Vue 使用 Object.define…

vue 实现循环

Vue 实现循环的方法在 Vue 中，可以使用 v-for 指令来实现循环渲染列表数据。以下是几种常见的循环实现方式：基本数组循环 <template> <ul>…

实现vue message

实现 Vue 消息提示组件创建 Message 组件在 src/components 目录下创建 Message.vue 文件，内容如下： <template> <tran…

vue实现checkbox

Vue 实现 Checkbox 在 Vue 中实现 Checkbox 可以通过原生 HTML 的 <input type="checkbox"> 或使用 Vue 的 v-model 指令绑…

vue实现slidetoggle