vue 实现确认弹框

使用 Vue 实现确认弹框

在 Vue 中实现确认弹框可以通过以下几种方式，包括使用内置组件、第三方库或自定义组件。

使用 window.confirm

最简单的方法是直接调用浏览器原生的 window.confirm，但这种方式样式不可定制。

methods: {
  showConfirm() {
    const isConfirmed = window.confirm('确定要执行此操作吗？');
    if (isConfirmed) {
      // 用户点击确定
      console.log('Confirmed');
    } else {
      // 用户点击取消
      console.log('Cancelled');
    }
  }
}

使用第三方库（如 Element UI）

Element UI 提供了 ElMessageBox 组件，支持高度定制化的确认弹框。

安装 Element UI：

npm install element-ui

在 Vue 中使用：

import { MessageBox } from 'element-ui';

methods: {
  showConfirm() {
    MessageBox.confirm('确定要执行此操作吗？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(() => {
      // 用户点击确定
      console.log('Confirmed');
    }).catch(() => {
      // 用户点击取消
      console.log('Cancelled');
    });
  }
}

自定义确认弹框组件

如果需要完全自定义样式和逻辑，可以创建一个独立的确认弹框组件。

1. 创建 ConfirmDialog.vue 组件：

   
   <template>
   <div class="confirm-dialog" v-if="visible">
    <div class="dialog-content">
      <p>{{ message }}</p>
      <button @click="handleConfirm">确定</button>
      <button @click="handleCancel">取消</button>
    </div>
   </div>
   </template>

export default { props: { message: { type: String, default: '确定要执行此操作吗？' }, visible: { type: Boolean, default: false } }, methods: { handleConfirm() { this.$emit('confirm'); this.$emit('update:visible', false); }, handleCancel() { this.$emit('cancel'); this.$emit('update:visible', false); } } }; .confirm-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; } .dialog-content { background: white; padding: 20px; border-radius: 5px; } ```

1. 在父组件中使用：

   
   <template>
   <div>
    <button @click="showConfirm">显示确认弹框</button>
    <ConfirmDialog
      v-model="isVisible"
      message="确定要删除此项吗？"
      @confirm="handleConfirm"
      @cancel="handleCancel"
    />
   </div>
   </template>

import ConfirmDialog from './ConfirmDialog.vue';

export default { components: { ConfirmDialog }, data() { return { isVisible: false }; }, methods: { showConfirm() { this.isVisible = true; }, handleConfirm() { console.log('Confirmed'); }, handleCancel() { console.log('Cancelled'); } } };

```

使用 Vuex 管理全局弹框状态

对于需要在多个组件中调用的确认弹框，可以通过 Vuex 管理其状态。

1. 在 Vuex store 中定义状态和 mutations：

   const store = new Vuex.Store({
   state: {
    confirmDialog: {
      visible: false,
      message: '',
      resolve: null,
      reject: null
    }
   },
   mutations: {
    showConfirmDialog(state, { message, resolve, reject }) {
      state.confirmDialog = {
        visible: true,
        message,
        resolve,
        reject
      };
    },
    hideConfirmDialog(state) {
      state.confirmDialog.visible = false;
    }
   }
   });

2. 创建全局确认弹框组件：

   
   <template>
   <div class="confirm-dialog" v-if="visible">
    <div class="dialog-content">
      <p>{{ message }}</p>
      <button @click="confirm">确定</button>
      <button @click="cancel">取消</button>
    </div>
   </div>
   </template>

import { mapState } from 'vuex';

export default { computed: { ...mapState({ visible: state => state.confirmDialog.visible, message: state => state.confirmDialog.message }) }, methods: { confirm() { this.$store.state.confirmDialog.resolve(); this.$store.commit('hideConfirmDialog'); }, cancel() { this.$store.state.confirmDialog.reject(); this.$store.commit('hideConfirmDialog'); } } };

```

1. 在任何组件中调用确认弹框：

   methods: {
   async showConfirm() {
    try {
      await this.$store.dispatch('showConfirmDialog', {
        message: '确定要执行此操作吗？'
      });
      console.log('Confirmed');
    } catch {
      console.log('Cancelled');
    }
   }
   }

使用 Promise 封装确认逻辑

可以将确认弹框封装为一个返回 Promise 的函数，便于在任何地方调用。

// utils/confirm.js
export function confirm(message) {
  return new Promise((resolve, reject) => {
    const isConfirmed = window.confirm(message);
    if (isConfirmed) {
      resolve();
    } else {
      reject();
    }
  });
}

// 在组件中使用
import { confirm } from '@/utils/confirm';

methods: {
  async handleAction() {
    try {
      await confirm('确定要执行此操作吗？');
      console.log('Confirmed');
    } catch {
      console.log('Cancelled');
    }
  }
}

以上方法涵盖了从简单到复杂的各种实现方式，可以根据项目需求选择合适的方案。