Vue ElementUI this.$confirm async await封裝方式
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("點擊確定"); ? ? ? ? ? ? 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( ? ? ? ? "此操作將永久刪除該文件, 是否繼續(xù)?", ? ? ? ? "提示", ? ? ? ? { ? ? ? ? ? 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中注冊,為了統(tǒng)一管理建議放在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:'創(chuàng)建', ? ? ? ? icon:'el-icon-circle-plus-outline', ? ? ? ? click: ()=>{console.log('創(chuàng)建')} ? ? ? },{ ? ? ? ? label:'修改', ? ? ? ? icon:'el-icon-edit-outline', ? ? ? ? click: ()=>{console.log('修改')} ? ? ? }] ? ? } ? } } </script>
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關文章
Vue如何實現(xiàn)利用vuex永久儲存數(shù)據(jù)
這篇文章主要介紹了Vue如何實現(xiàn)利用vuex永久儲存數(shù)據(jù)問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-04-04vue+watermark-dom實現(xiàn)頁面水印效果(示例代碼)
watermark.js 是基于 DOM 對象實現(xiàn)的 BS 系統(tǒng)的水印,確保系統(tǒng)保密性,安全性,降低數(shù)據(jù)泄密風險,簡單輕量,支持多屬性配置,本文將通過 vue 結合 watermark-dom 庫,教大家實現(xiàn)簡單而有效的頁面水印效果,感興趣的朋友跟隨小編一起看看吧2024-07-07vue前端獲取/切換麥克風、播放采集音頻和采集音量大小完整代碼
這篇文章主要給大家介紹了關于vue前端獲取/切換麥克風、播放采集音頻和采集音量大小的相關資料,文中通過圖文以及代碼介紹的非常詳細,對大家學習或者使用vue具有一定的參考借鑒價值,需要的朋友可以參考下2023-12-12el-table樹形數(shù)據(jù)量過大,導致頁面卡頓問題及解決
這篇文章主要介紹了el-table樹形數(shù)據(jù)量過大,導致頁面卡頓問題及解決,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-04-04