Vue ElementUI this.$confirm async await封裝方式

更新時(shí)間：2022年09月23日 15:47:22 作者：asdfsdgfsdgfa

這篇文章主要介紹了Vue ElementUI this.$confirm async await封裝方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

Vue ElementUI this.$confirm async await封裝

this.$confirm官網(wǎng)：

https://element.eleme.cn/#/zh-CN/component/message-box

改造前

? ? async test() {
? ? ? console.log("111111");
? ? ? this.$confirm("此操作將永久刪除該文件, 是否繼續(xù)?", "提示", {
? ? ? ? confirmButtonText: "確定",
? ? ? ? cancelButtonText: "取消",
? ? ? ? type: "warning",
? ? ? })
? ? ? ? .then(() => {
? ? ? ? ? console.log("點(diǎn)擊確定");
?
? ? ? ? ? this.$message({
? ? ? ? ? ? type: "success",
? ? ? ? ? ? message: "刪除成功!",
? ? ? ? ? });
? ? ? ? })
? ? ? ? .catch(() => {
? ? ? ? ? console.log("點(diǎn)擊取消");
?
? ? ? ? ? this.$message({
? ? ? ? ? ? type: "info",
? ? ? ? ? ? message: "已取消刪除",
? ? ? ? ? });
? ? ? ? });
? ? ? console.log("2222222");
? ? },

async await改造后

async test() {
? ? ? console.log("111111");
? ? ? let confirmRes = await this.$confirm(
? ? ? ? "此操作將永久刪除該文件, 是否繼續(xù)?",
? ? ? ? "提示",
? ? ? ? {
? ? ? ? ? confirmButtonText: "確定",
? ? ? ? ? cancelButtonText: "取消",
? ? ? ? ? type: "warning",
? ? ? ? }
? ? ? ).catch(() => {});
?
? ? ? if (confirmRes !== "confirm") {
? ? ? ? console.log("點(diǎn)擊取消");
? ? ? ? return;
? ? ? }
? ? ? console.log("點(diǎn)擊確定");
? ? ? console.log("2222222");
? ? }

一定要加上.catch(() => {});否則報(bào)錯(cuò)

Vue elementUI組件封裝思路

核心

父子傳值、slot插槽

插槽傳值

<slot title=“123” name=“aaa”></slot>

父組件接收插槽值

<div slot=“aaa” slot-scope=“props” :value=“props.title”></div>

示例步驟

1、在components文件夾下新建一個(gè)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, 用于注冊(cè)組件，也可以在main.js中注冊(cè)，為了統(tǒng)一管理建議放在components中注冊(cè)

3、然后main.js中引入，就可以直接使用了**

注冊(cè)

import Vue from 'vue'
import MyComponent1 from './MyComponent1/index.vue'
//多個(gè)組件就多次注冊(cè)
Vue.component(MyComponent1.name, MyComponent1)
''

使用

<template>
? <div>
? ? <MyComponent1 :buttons="buttons"></MyComponent1>
? </div>
</template>

<script>
export default {
? name: '',
? data () {
? ? return {
? ? ? buttons: [{
? ? ? ? label:'創(chuàng)建',
? ? ? ? icon:'el-icon-circle-plus-outline',
? ? ? ? click: ()=>{console.log('創(chuàng)建')}
? ? ? },{
? ? ? ? label:'修改',
? ? ? ? icon:'el-icon-edit-outline',
? ? ? ? click: ()=>{console.log('修改')}
? ? ? }]
? ? }
? }
}
</script>

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: