Vue ElementUI this.$confirm async await封装方式

目录

• Vue ElementUI this.$confirm async await封装
• 改造前
• async await改造后
• Vue elementUI组件封装思路
• 核心
• 示例步骤

Vue ElementUI this.$confirm async await封装

this.$confirm官网：

https://element.eleme.cn/#/zh-CN/component/message-box

改造前

    async test() {
      console.log("111111");
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          console.log("点击确定");
 
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          console.log("点击取消");
 
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
      console.log("2222222");
    },

async await改造后

async test() {
      console.log("111111");
      let confirmRes = await this.$confirm(
        "此操作将永久删除该文件, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).catch(() => {});
 
      if (confirmRes !== "confirm") {
        console.log("点击取消");
        return;
      }
      console.log("点击确定");
      console.log("2222222");
    }

一定要加上.catch(() => {});否则报错

Vue elementUI组件封装思路

核心

父子传值、slot插槽

插槽传值

父组件接收插槽值

示例步骤

1、在components文件夹下新建一个MyComponent1文件夹，新建MyCompont1.vue

（以btn为例）

2、components文件夹下新建index.js, 用于注册组件，也可以在main.js中注册，为了统一管理建议放在components中注册

3、然后main.js中引入，就可以直接使用了**

注册

import Vue from 'vue'
import MyComponent1 from './MyComponent1/index.vue'
//多个组件就多次注册
Vue.component(MyComponent1.name, MyComponent1)
''

使用

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。