您现在的位置是:网站首页> 编程资料编程资料

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

2023-05-24 990人已围观

简介 Vue ElementUI this.$confirm async await封装方式_vue.js_

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) ''

使用

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

-六神源码网