vue 实现 confirm

实现确认对话框的方法

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

使用浏览器原生confirm

最简单的实现方式是直接调用浏览器原生的confirm方法。这种方式不需要额外的依赖，但样式和功能较为基础。

methods: {
  handleAction() {
    const result = confirm('确定要执行此操作吗？');
    if (result) {
      // 用户点击确定
      this.performAction();
    } else {
      // 用户点击取消
      console.log('操作已取消');
    }
  },
  performAction() {
    // 执行具体操作
  }
}

使用Element UI的MessageBox

如果项目中使用Element UI组件库，可以利用其MessageBox组件实现更美观的确认对话框。

import { MessageBox } from 'element-ui';

methods: {
  async confirmAction() {
    try {
      await MessageBox.confirm('确定要删除此项吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      });
      // 用户点击确定
      this.deleteItem();
    } catch (error) {
      // 用户点击取消
      console.log('操作取消');
    }
  },
  deleteItem() {
    // 删除操作
  }
}

自定义确认对话框组件

对于需要完全自定义样式和行为的场景，可以创建一个独立的确认对话框组件。

<!-- ConfirmDialog.vue -->
<template>
  <div class="confirm-dialog" v-if="visible">
    <div class="dialog-content">
      <h3>{{ title }}</h3>
      <p>{{ message }}</p>
      <div class="buttons">
        <button @click="confirm">确定</button>
        <button @click="cancel">取消</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    visible: Boolean,
    title: String,
    message: String
  },
  methods: {
    confirm() {
      this.$emit('confirm');
      this.$emit('update:visible', false);
    },
    cancel() {
      this.$emit('cancel');
      this.$emit('update:visible', false);
    }
  }
};
</script>

使用自定义组件：

// 父组件中使用
<template>
  <div>
    <button @click="showConfirm = true">删除</button>
    <ConfirmDialog
      v-model="showConfirm"
      title="确认删除"
      message="确定要删除此项吗？"
      @confirm="deleteItem"
      @cancel="cancelDelete"
    />
  </div>
</template>

<script>
import ConfirmDialog from './ConfirmDialog.vue';

export default {
  components: { ConfirmDialog },
  data() {
    return {
      showConfirm: false
    };
  },
  methods: {
    deleteItem() {
      // 执行删除操作
    },
    cancelDelete() {
      console.log('删除操作已取消');
    }
  }
};
</script>

使用Vuex管理全局确认对话框

对于需要在多个组件中使用的确认对话框，可以使用Vuex进行全局状态管理。

// store.js
export default new Vuex.Store({
  state: {
    confirmDialog: {
      show: false,
      title: '',
      message: '',
      resolve: null
    }
  },
  mutations: {
    showConfirm(state, { title, message }) {
      state.confirmDialog = {
        show: true,
        title,
        message,
        resolve: null
      };
    },
    hideConfirm(state) {
      state.confirmDialog.show = false;
    },
    setResolve(state, resolve) {
      state.confirmDialog.resolve = resolve;
    }
  },
  actions: {
    async showConfirm({ commit }, { title, message }) {
      commit('showConfirm', { title, message });
      return new Promise((resolve) => {
        commit('setResolve', resolve);
      });
    }
  }
});

使用全局确认对话框：

methods: {
  async performAction() {
    const confirmed = await this.$store.dispatch('showConfirm', {
      title: '确认',
      message: '确定执行此操作吗？'
    });
    if (confirmed) {
      // 执行操作
    }
  }
}

使用第三方库如SweetAlert2

SweetAlert2提供了美观且功能丰富的对话框，可以轻松集成到Vue项目中。

import Swal from 'sweetalert2';

methods: {
  async confirmAction() {
    const result = await Swal.fire({
      title: '确定要删除吗？',
      text: "删除后将无法恢复",
      icon: 'warning',
      showCancelButton: true,
      confirmButtonColor: '#3085d6',
      cancelButtonColor: '#d33',
      confirmButtonText: '确定',
      cancelButtonText: '取消'
    });

    if (result.isConfirmed) {
      this.deleteItem();
    }
  }
}

每种方法都有其适用场景，选择哪种方式取决于项目需求、UI要求和开发偏好。原生confirm最简单但样式受限，自定义组件最灵活但需要更多开发工作，第三方库则提供了美观且功能丰富的现成解决方案。