Vue ElementUI this.$confirm async&n

目录 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插槽

插槽传值

<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测试数据ponent(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>

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

查看更多关于Vue ElementUI this.$confirm async&n的详细内容...