当前位置：首页 > VUE

vue实现收缩表单

2026-02-19 02:58:22VUE

Vue 实现收缩表单的方法

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

通过 Vue 的 v-show 或 v-if 指令可以轻松实现表单的收缩和展开功能。v-show 通过 CSS 的 display 属性控制显示，适合频繁切换的场景；v-if 会销毁和重建 DOM 节点，适合不频繁切换的场景。

<template>
  <div>
    <button @click="toggleForm">切换表单</button>
    <form v-show="isFormVisible">
      <!-- 表单内容 -->
      <input type="text" placeholder="输入内容">
    </form>
  </div>
</template>

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

使用 CSS 过渡动画

为表单的收缩和展开添加过渡效果，可以通过 Vue 的 <transition> 组件结合 CSS 实现平滑的动画效果。

<template>
  <div>
    <button @click="toggleForm">切换表单</button>
    <transition name="slide">
      <form v-show="isFormVisible">
        <!-- 表单内容 -->
        <input type="text" placeholder="输入内容">
      </form>
    </transition>
  </div>
</template>

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

<style>
.slide-enter-active, .slide-leave-active {
  transition: all 0.3s ease;
}
.slide-enter, .slide-leave-to {
  opacity: 0;
  transform: translateY(-10px);
}
</style>

动态调整表单高度

如果需要更精细地控制表单的收缩和展开，可以通过动态绑定样式或类名来实现高度变化。

<template>
  <div>
    <button @click="toggleForm">切换表单</button>
    <form :style="{ height: formHeight }">
      <!-- 表单内容 -->
      <input type="text" placeholder="输入内容">
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isFormExpanded: false,
      expandedHeight: '200px',
      collapsedHeight: '0px'
    }
  },
  computed: {
    formHeight() {
      return this.isFormExpanded ? this.expandedHeight : this.collapsedHeight
    }
  },
  methods: {
    toggleForm() {
      this.isFormExpanded = !this.isFormExpanded
    }
  }
}
</script>

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

使用第三方库

如果需要更复杂的交互效果，可以借助第三方库如 vue-collapse 或 element-ui 的折叠面板组件。

<template>
  <div>
    <el-collapse v-model="activeNames">
      <el-collapse-item title="表单" name="1">
        <form>
          <!-- 表单内容 -->
          <input type="text" placeholder="输入内容">
        </form>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

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

以上方法可以根据实际需求选择适合的方式实现表单的收缩功能。

vue实现收缩表单