[JavaScript知识库]vue2 确认框 MessageBox 弹框 删除确认取消

项目需要删除时弹出确认框 需求是项目完成80%时提出的 再添加弹出框的话 耗时耗力 所于是就有了封装好的弹窗函数挂载到Vue的原型上 在项目里面可以直接 this. 调用 显著提升摸鱼时间 话不多说 看代码

第一步 在 utils 创建一个名叫 MessageBox.js 的文件 把代发复制进去
↓↓↓ 代码 ↓↓↓

/**
 *
 **********************
 * @MessageBox { true } : 引入element的弹出框
 * @confirmButtonText { true } : 确认按钮显示文字 ( 可更改 )
 * @cancelButtonText { true } : 取消按钮显示文字 ( 可更改 )
 * @外比巴卜 { false } : 确认返回 true , 取消返回 false , 方便进项下一步操作
 **********************
 *
 */

import { MessageBox } from "element-ui";
export const box = () => {
  return MessageBox.confirm("此操作不可撤回，是否继续？", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => true)
    .catch(() => false);
};

第二部 把它在 main.js 中引入
↓↓↓ 代码 ↓↓↓

import Vue from "vue";
import App from "./App.vue";

//在这里引入 并挂载到Vue原型上
import { box } from "./utils/messageBox";
Vue.prototype._box = box;

第三部 食用环节
↓↓↓ 代码 ↓↓↓

<template>
  <el-button @click="del_product"></el-button>
</template>

<script>
export default {
  methods: {
    async del_product() {
      if (!(await this._box())) return;
    },
  },
};
</script>

<style></style>

这样就大功告成了
返回的 布尔值判断是否执行 return 跳出函数