当前位置：首页 > VUE

vue实现弹出表单

2026-02-17 08:30:21VUE

vue实现弹出表单的方法

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

通过v-if或v-show指令控制表单的显示与隐藏。v-if会完全销毁和重建DOM元素，适合不频繁切换的场景；v-show仅切换CSS的display属性，适合频繁切换的场景。

<template>
  <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>
</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;
  z-index: 1000;
}
</style>

使用组件封装

将弹出表单封装为独立组件，通过props和$emit实现父子组件通信。这种方式更符合Vue的组件化思想，便于复用。

<!-- ParentComponent.vue -->
<template>
  <button @click="showForm = true">打开表单</button>
  <PopupForm 
    v-if="showForm" 
    @submit="handleSubmit" 
    @close="showForm = false"
  />
</template>

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

export default {
  components: { PopupForm },
  data() {
    return { showForm: false }
  },
  methods: {
    handleSubmit(formData) {
      console.log(formData)
    }
  }
}
</script>

<!-- PopupForm.vue -->
<template>
  <div class="modal">
    <form @submit.prevent="$emit('submit', formData)">
      <input v-model="formData.name" placeholder="姓名"/>
      <button type="submit">提交</button>
      <button @click="$emit('close')">取消</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return { formData: { name: '' } }
  }
}
</script>

使用第三方UI库

Element UI、Ant Design Vue等流行UI库都提供了现成的对话框和表单组件，可以快速实现功能。

<template>
  <el-button @click="dialogVisible = true">打开表单</el-button>
  <el-dialog v-model="dialogVisible" title="表单">
    <el-form :model="formData" @submit.prevent="handleSubmit">
      <el-form-item label="姓名">
        <el-input v-model="formData.name"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" native-type="submit">提交</el-button>
        <el-button @click="dialogVisible = false">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

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

使用Teleport传送门

Vue 3的Teleport组件可以将模态框渲染到DOM中的任何位置，避免z-index和定位问题。

<template>
  <button @click="showForm = true">打开表单</button>
  <Teleport to="body">
    <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>
  </Teleport>
</template>

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

每种方法都有其适用场景，简单需求可以使用v-if/v-show，复杂项目建议采用组件封装或UI库方案。Teleport适用于需要精确控制DOM位置的场景。

vue实现弹出表单