您现在的位置是:网站首页> 编程资料编程资料
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为例)
{{btn.label}}
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) ''
使用
以上为个人经验,希望能给大家一个参考,也希望大家多多支持。
您可能感兴趣的文章:
相关内容
- Vue echarts模拟后端数据流程详解_vue.js_
- Vue结合openlayers按照经纬度坐标实现锚地标记及绘制多边形区域_vue.js_
- vue+el使用this.$confirm,不能阻断代码往下执行的解决_vue.js_
- vue中i18n的安装与几种使用方式详解_vue.js_
- vue鼠标悬停事件监听实现方法_vue.js_
- vue项目中使用this.$confirm解析_vue.js_
- React Native Modal 的封装与使用实例详解_React_
- vue常用组件之confirm用法及说明_vue.js_
- react使用useImperativeHandle示例详解_React_
- vue-router路由跳转问题 replace_vue.js_
