vue实现弹出表单

使用 Vue 实现弹出表单

基础实现（基于 v-if 和 v-show）

通过 v-if 或 v-show 控制表单的显示与隐藏，适合简单场景。

<template>
  <div>
    <button @click="showForm = true">打开表单</button>
    <div v-if="showForm" class="modal">
      <form @submit.prevent="handleSubmit">
        <input v-model="formData.name" placeholder="姓名">
        <button type="submit">提交</button>
        <button @click="showForm = false">关闭</button>
      </form>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showForm: false,
      formData: { name: '' }
    };
  },
  methods: {
    handleSubmit() {
      console.log('提交数据:', this.formData);
      this.showForm = false;
    }
  }
};
</script>

<style>
.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  padding: 20px;
  border: 1px solid #ccc;
}
</style>

使用 Vue 组件封装

将弹出表单封装为可复用的组件，适合复杂场景。

<!-- PopupForm.vue -->
<template>
  <div v-if="visible" class="popup-form">
    <form @submit.prevent="submit">
      <slot></slot>
      <button type="submit">提交</button>
      <button @click="close">关闭</button>
    </form>
  </div>
</template>

<script>
export default {
  props: {
    visible: Boolean
  },
  methods: {
    submit() {
      this.$emit('submit');
    },
    close() {
      this.$emit('update:visible', false);
    }
  }
};
</script>

<style>
.popup-form {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  padding: 20px;
  border: 1px solid #ccc;
}
</style>

调用封装组件

在父组件中调用封装好的弹出表单。

<template>
  <div>
    <button @click="showPopup = true">打开表单</button>
    <PopupForm :visible.sync="showPopup" @submit="handleSubmit">
      <input v-model="formData.name" placeholder="姓名">
    </PopupForm>
  </div>
</template>

<script>
import PopupForm from './PopupForm.vue';

export default {
  components: { PopupForm },
  data() {
    return {
      showPopup: false,
      formData: { name: '' }
    };
  },
  methods: {
    handleSubmit() {
      console.log('提交数据:', this.formData);
    }
  }
};
</script>

使用第三方库（如 Element UI）

借助 UI 库快速实现弹窗表单，适合企业级应用。

<template>
  <div>
    <el-button @click="dialogVisible = true">打开表单</el-button>
    <el-dialog :visible.sync="dialogVisible" title="表单">
      <el-form :model="formData">
        <el-form-item label="姓名">
          <el-input v-model="formData.name"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button @click="handleSubmit">提交</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
      formData: { name: '' }
    };
  },
  methods: {
    handleSubmit() {
      console.log('提交数据:', this.formData);
      this.dialogVisible = false;
    }
  }
};
</script>

动画效果增强

通过 Vue 的过渡动画（Transition）提升用户体验。

<template>
  <div>
    <button @click="showForm = true">打开表单</button>
    <transition name="fade">
      <div v-if="showForm" class="modal">
        <form @submit.prevent="handleSubmit">
          <input v-model="formData.name" placeholder="姓名">
          <button type="submit">提交</button>
          <button @click="showForm = false">关闭</button>
        </form>
      </div>
    </transition>
  </div>
</template>

<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  padding: 20px;
  border: 1px solid #ccc;
}
</style>