vue实现删除弹窗

Vue 实现删除弹窗的方法

使用 Vue 组件实现基础弹窗

创建一个独立的弹窗组件 DeleteDialog.vue，包含确认和取消按钮：

<template>
  <div class="delete-dialog" v-if="visible">
    <div class="dialog-content">
      <h3>确认删除？</h3>
      <p>此操作不可撤销，请谨慎操作</p>
      <div class="dialog-actions">
        <button @click="handleCancel">取消</button>
        <button @click="handleConfirm" class="confirm-btn">确认删除</button>
      </div>
    </div>
  </div>
</template>

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

<style scoped>
.delete-dialog {
  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;
  z-index: 1000;
}
.dialog-content {
  background: white;
  padding: 20px;
  border-radius: 8px;
  max-width: 400px;
}
.dialog-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
  gap: 10px;
}
.confirm-btn {
  background: #ff4d4f;
  color: white;
}
</style>

在父组件中使用弹窗

在需要删除功能的页面中引入并使用弹窗组件：

<template>
  <div>
    <button @click="showDeleteDialog">删除项目</button>

    <DeleteDialog 
      :visible="dialogVisible"
      @confirm="deleteItem"
      @cancel="hideDeleteDialog"
    />
  </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.hideDeleteDialog()
    }
  }
}
</script>

使用 Vuex 管理弹窗状态（可选）

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

// store/modules/dialog.js
export default {
  state: {
    deleteDialogVisible: false
  },
  mutations: {
    SHOW_DELETE_DIALOG(state) {
      state.deleteDialogVisible = true
    },
    HIDE_DELETE_DIALOG(state) {
      state.deleteDialogVisible = false
    }
  },
  actions: {
    showDeleteDialog({ commit }) {
      commit('SHOW_DELETE_DIALOG')
    },
    hideDeleteDialog({ commit }) {
      commit('HIDE_DELETE_DIALOG')
    }
  }
}

使用第三方 UI 库快速实现

如果使用 Element UI 等第三方库，可以更快速实现：

<template>
  <el-button @click="openDeleteDialog">删除</el-button>

  <el-dialog
    title="提示"
    :visible.sync="dialogVisible"
    width="30%">
    <span>确认删除此项吗？</span>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取消</el-button>
      <el-button type="danger" @click="handleDelete">确认</el-button>
    </span>
  </el-dialog>
</template>

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

添加删除前的数据加载

在显示弹窗前加载要删除的数据：

<script>
export default {
  methods: {
    async showDeleteDialog(itemId) {
      try {
        const res = await api.getItemDetails(itemId)
        this.itemToDelete = res.data
        this.dialogVisible = true
      } catch (error) {
        console.error('加载数据失败', error)
      }
    }
  }
}
</script>

弹窗动画效果

为弹窗添加过渡动画：

<template>
  <transition name="fade">
    <div class="delete-dialog" v-if="visible">
      <!-- 弹窗内容 -->
    </div>
  </transition>
</template>

<style scoped>
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.3s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>