当前位置：首页 > VUE

vue实现删除弹窗

2026-01-16 03:35:10VUE

实现删除弹窗的基本思路

在Vue中实现删除弹窗功能，通常需要结合组件化思想和状态管理。弹窗组件可以设计为独立的可复用组件，通过props接收数据，通过emit触发事件。

创建基础弹窗组件

创建一个名为DeleteDialog.vue的组件，包含弹窗的基本结构和样式：

vue实现删除弹窗

<template>
  <div class="delete-dialog" v-if="visible">
    <div class="dialog-mask"></div>
    <div class="dialog-container">
      <div class="dialog-header">
        <h3>确认删除</h3>
      </div>
      <div class="dialog-body">
        <p>确定要删除该项吗？此操作不可撤销。</p>
      </div>
      <div class="dialog-footer">
        <button @click="handleCancel">取消</button>
        <button @click="handleConfirm" class="danger">确认删除</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    handleCancel() {
      this.$emit('cancel')
    },
    handleConfirm() {
      this.$emit('confirm')
    }
  }
}
</script>

<style scoped>
.delete-dialog {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
}

.dialog-mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}

.dialog-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
  padding: 20px;
  border-radius: 4px;
  min-width: 300px;
}

.dialog-footer button {
  margin-left: 10px;
}

.danger {
  background-color: #f56c6c;
  color: white;
}
</style>

在父组件中使用弹窗

在需要使用弹窗的父组件中引入并控制弹窗的显示：

vue实现删除弹窗

<template>
  <div>
    <button @click="showDeleteDialog">删除项目</button>
    <delete-dialog 
      :visible="dialogVisible" 
      @cancel="hideDeleteDialog"
      @confirm="deleteItem"
    />
  </div>
</template>

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

export default {
  components: {
    DeleteDialog
  },
  data() {
    return {
      dialogVisible: false,
      itemToDelete: null
    }
  },
  methods: {
    showDeleteDialog() {
      this.dialogVisible = true
    },
    hideDeleteDialog() {
      this.dialogVisible = false
    },
    deleteItem() {
      // 实际删除逻辑
      console.log('执行删除操作')
      this.dialogVisible = false
    }
  }
}
</script>

增强弹窗功能

可以扩展弹窗组件使其更灵活：

自定义提示内容


<template>
<!-- ...其他代码不变... -->
<div class="dialog-body">
 <p>{{ message }}</p>
</div>
</template>

export default { props: { visible: Boolean, message: { type: String, default: '确定要删除该项吗？此操作不可撤销。' } } // ...其他代码不变... } ```

添加加载状态


<template>
<button @click="handleConfirm" class="danger" :disabled="loading">
 {{ loading ? '删除中...' : '确认删除' }}
</button>
</template>

export default { data() { return { loading: false } }, methods: { async handleConfirm() { this.loading = true try { await this.$emit('confirm') } finally { this.loading = false } } } } ```

使用第三方UI库

如果项目中使用Element UI、Ant Design Vue等UI库，可以直接使用它们提供的Dialog组件：

<template>
  <el-button type="danger" @click="dialogVisible = true">删除</el-button>

  <el-dialog
    title="提示"
    :visible.sync="dialogVisible"
    width="30%">
    <span>确定要删除吗？</span>
    <template #footer>
      <el-button @click="dialogVisible = false">取消</el-button>
      <el-button type="primary" @click="handleDelete">确定</el-button>
    </template>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false
    }
  },
  methods: {
    handleDelete() {
      // 删除逻辑
      this.dialogVisible = false
    }
  }
}
</script>