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>
原文地址:https://blog.csdn.net/qq_40323256/article/details/126604300
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。