当前位置：首页 > VUE

vue实现弹新增窗口

2026-02-24 19:55:08VUE

Vue 实现弹窗新增功能

使用组件化方式实现弹窗

在 Vue 中可以通过组件化方式实现弹窗功能。创建一个独立的弹窗组件，通过 v-if 或 v-show 控制显示隐藏，通过 props 接收父组件数据，通过 $emit 向父组件传递事件。

<!-- PopupWindow.vue -->
<template>
  <div class="popup" v-if="visible">
    <div class="popup-content">
      <h3>新增记录</h3>
      <form @submit.prevent="handleSubmit">
        <input v-model="formData.name" placeholder="名称"/>
        <input v-model="formData.description" placeholder="描述"/>
        <button type="submit">提交</button>
        <button @click="close">取消</button>
      </form>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    visible: Boolean
  },
  data() {
    return {
      formData: {
        name: '',
        description: ''
      }
    }
  },
  methods: {
    handleSubmit() {
      this.$emit('submit', this.formData)
      this.close()
    },
    close() {
      this.$emit('update:visible', false)
    }
  }
}
</script>

<style>
.popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}
.popup-content {
  background: white;
  padding: 20px;
  border-radius: 5px;
}
</style>

在父组件中使用弹窗

父组件中需要管理弹窗的显示状态和处理提交的数据。

<!-- ParentComponent.vue -->
<template>
  <div>
    <button @click="showPopup = true">新增记录</button>
    <PopupWindow 
      :visible.sync="showPopup"
      @submit="handleSubmit"
    />
  </div>
</template>

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

export default {
  components: {
    PopupWindow
  },
  data() {
    return {
      showPopup: false
    }
  },
  methods: {
    handleSubmit(formData) {
      // 处理提交数据，如发送API请求
      console.log('提交数据:', formData)
    }
  }
}
</script>

使用第三方弹窗库

如果需要更丰富的功能，可以考虑使用第三方弹窗组件库：

vue实现弹新增窗口

Element UI 的 Dialog 组件：

<template>
<el-button @click="dialogVisible = true">新增</el-button>
<el-dialog
 title="新增记录"
 :visible.sync="dialogVisible"
 width="30%">
 <el-form :model="form">
   <el-form-item label="名称">
     <el-input v-model="form.name"></el-input>
   </el-form-item>
   <el-form-item label="描述">
     <el-input v-model="form.description"></el-input>
   </el-form-item>
 </el-form>
 <span slot="footer">
   <el-button @click="dialogVisible = false">取消</el-button>
   <el-button type="primary" @click="submitForm">确定</el-button>
 </span>
</el-dialog>
</template>

Vuetify 的 Dialog 组件：

vue实现弹新增窗口

<template>
<v-btn @click="dialog = true">新增</v-btn>
<v-dialog v-model="dialog" max-width="500px">
 <v-card>
   <v-card-title>新增记录</v-card-title>
   <v-card-text>
     <v-text-field v-model="form.name" label="名称"></v-text-field>
     <v-text-field v-model="form.description" label="描述"></v-text-field>
   </v-card-text>
   <v-card-actions>
     <v-spacer></v-spacer>
     <v-btn @click="dialog = false">取消</v-btn>
     <v-btn color="primary" @click="submit">提交</v-btn>
   </v-card-actions>
 </v-card>
</v-dialog>
</template>

使用 Vuex 管理弹窗状态

在大型应用中，可以使用 Vuex 集中管理弹窗状态：

// store.js
export default new Vuex.Store({
  state: {
    popupVisible: false,
    popupData: {}
  },
  mutations: {
    showPopup(state) {
      state.popupVisible = true
    },
    hidePopup(state) {
      state.popupVisible = false
    },
    setPopupData(state, data) {
      state.popupData = data
    }
  }
})

然后在组件中通过 mapState 和 mapMutations 使用：

<template>
  <button @click="showPopup">新增</button>
  <PopupWindow v-if="popupVisible" @close="hidePopup"/>
</template>

<script>
import { mapState, mapMutations } from 'vuex'

export default {
  computed: {
    ...mapState(['popupVisible'])
  },
  methods: {
    ...mapMutations(['showPopup', 'hidePopup'])
  }
}
</script>

以上方法提供了不同复杂度的弹窗实现方案，可以根据项目需求选择适合的方式。