当前位置：首页 > 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>

使用第三方库

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

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 slidetoggle

分享给朋友：

vue实现聊天

Vue实现聊天功能基础项目结构搭建使用Vue CLI或Vite创建项目，安装必要依赖如socket.io-client或axios（根据通信方式选择）。核心组件通常包括： ChatWindow.…

vue实现app

Vue 实现 App 的常见方法使用 Vue 开发移动端 App 主要有两种主流方案：混合开发（Hybrid）和原生渲染。以下是具体实现方式和工具链：混合开发方案（WebView 嵌入）通…

vue实现新闻

Vue 实现新闻功能使用 Vue 实现新闻功能通常涉及新闻列表展示、新闻详情页、分类筛选等模块。以下是实现的基本思路和代码示例。新闻列表展示通过 Vue 组件展示新闻列表，通常使用 v-fo…

vue 实现直播

Vue 实现直播的基本方法在Vue中实现直播功能，通常需要结合WebRTC、RTMP或HLS等技术。以下是几种常见的实现方式：使用WebRTC实现实时直播 WebRTC适合低延迟的实时直播场景…

vue tab实现

Vue Tab 实现方法使用动态组件实现 Tab 在 Vue 中可以通过动态组件 <component :is="currentTab"> 结合 v-for 和 v-bind 实现 Ta…

vue实现动画

Vue 实现动画的方法 Vue 提供了多种方式来实现动画效果，包括内置的过渡系统、第三方动画库以及直接操作 CSS 或 JavaScript 动画。使用 Vue 内置过渡系统 Vue 的 <…

vue实现slidetoggle