当前位置：首页 > 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 中实现选区创建通常涉及 DOM 操作和事件处理。以下是几种常见的方法：使用原生 DOM API 通过 window.getSelection() 和 Ran…

用vue实现搜索查询

实现搜索查询的基本思路在Vue中实现搜索查询功能通常涉及以下几个核心部分：数据绑定、事件监听、过滤逻辑和UI反馈。以下是一个完整的实现方案。数据绑定与输入框创建一个Vue组件，包含一个输入框…

vue中如何实现循环

在 Vue 中实现循环 Vue 提供了 v-for 指令用于实现循环渲染列表数据。v-for 可以遍历数组、对象或数字范围，生成动态的 DOM 元素。遍历数组使用 v-for 遍历数组时，语法…

vue实现菜单栏锚点

实现锚点菜单的基本思路在Vue中实现菜单栏锚点功能，主要涉及两个方面：创建可跳转的锚点位置，以及菜单项的点击滚动控制。通过监听滚动事件可以高亮当前可见区域的对应菜单项。创建页面锚点位置在需要…

vue实现mvc

Vue 实现 MVC 模式 Vue 本身是一个 MVVM（Model-View-ViewModel）框架，但可以通过结构调整实现 MVC（Model-View-Controller）模式。以下是具体实…

vue 实现复选

Vue 实现复选功能在 Vue 中实现复选功能可以通过多种方式完成，以下是常见的几种方法：使用 v-model 绑定数组通过 v-model 绑定一个数组，可以自动收集用户选择的复选框值。…

vue实现slidetoggle