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插槽
插槽传值
<slot title=“123” name=“aaa”></slot>
父组件接收插槽值
<div slot=“aaa” slot-scope=“props” :value=“props.title”></div>
示例步骤
1、在components文件夹下新建一个MyComponent1文件夹，新建MyCompont1.vue
（以btn为例）
<template>
<el-button-group>
<el-button
v-for="(btn,index) in this.buttons"
:key="index"
:type="btn.type ? btn.type:'primary'"
:icon="btn.icon"
:size="btn.size?btn.size:'mini'"
@click="btn.click"
>
{{btn.label}}
</el-button>
</el-button-group>
</template><script>
export default {
name: 'MyComponent1', // name就是封装好后使用的组件名
props: {
buttons: {
type: Array,
required: true
}
}
}
</script>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) ''
使用
<template> <div> <MyComponent1 :buttons="buttons"></MyComponent1> </div> </template>
<script>
export default {
name: '',
data () {
return {
buttons: [{
label:'创建',
icon:'el-icon-circle-plus-outline',
click: ()=>{console.log('创建')}
},{
label:'修改',
icon:'el-icon-edit-outline',
click: ()=>{console.log('修改')}
}]
}
}
}
</script>以上为个人经验，希望能给大家一个参考，也希望大家多多支持Devmax。