当前位置：首页 > VUE

vue实现收缩表单

2026-01-18 10:31:38VUE

Vue 实现收缩表单的方法

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

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

<template>
  <div>
    <button @click="toggleForm">Toggle Form</button>
    <form v-show="isFormVisible">
      <input type="text" placeholder="Name">
      <input type="email" placeholder="Email">
    </form>
  </div>
</template>

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

结合 CSS 过渡动画

通过 Vue 的 <transition> 组件可以实现平滑的展开和收缩动画效果。

<template>
  <div>
    <button @click="toggleForm">Toggle Form</button>
    <transition name="slide">
      <form v-show="isFormVisible">
        <input type="text" placeholder="Name">
        <input type="email" placeholder="Email">
      </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: max-height 0.5s ease;
}
.slide-enter, .slide-leave-to {
  max-height: 0;
  overflow: hidden;
}
.slide-enter-to, .slide-leave {
  max-height: 500px;
}
</style>

动态调整表单高度

通过动态绑定样式，可以实现更灵活的收缩效果，比如调整高度或宽度。

<template>
  <div>
    <button @click="toggleForm">Toggle Form</button>
    <form :style="{ height: isFormVisible ? 'auto' : '0', overflow: 'hidden' }">
      <input type="text" placeholder="Name">
      <input type="email" placeholder="Email">
    </form>
  </div>
</template>

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

使用第三方库

如果需要更复杂的动画效果，可以结合第三方动画库如 animate.css。

<template>
  <div>
    <button @click="toggleForm">Toggle Form</button>
    <transition
      enter-active-class="animate__animated animate__fadeInDown"
      leave-active-class="animate__animated animate__fadeOutUp"
    >
      <form v-show="isFormVisible">
        <input type="text" placeholder="Name">
        <input type="email" placeholder="Email">
      </form>
    </transition>
  </div>
</template>

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

表单数据的处理

在收缩表单时，可能需要清除表单数据或保留数据。可以通过 v-model 绑定数据，并在适当的时候重置。

<template>
  <div>
    <button @click="toggleForm">Toggle Form</button>
    <form v-show="isFormVisible">
      <input type="text" v-model="formData.name" placeholder="Name">
      <input type="email" v-model="formData.email" placeholder="Email">
    </form>
    <button @click="resetForm" v-show="isFormVisible">Reset</button>
  </div>
</template>

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

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

vue实现收缩表单