对element-plus的messageBox进行二次封装,使其能够显示自定义组件
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档
前言
我们在使用messageBox时,想要插入img图片,或者是指定一些样式都不太方便,所以我对其进行二次封装成一个hooks,我们可以将写好的组件插入messageBox中
一、代码
UseMessageBox.ts
import { ElMessageBox } from 'element-plus';
import { createApp, nextTick } from "vue";
interface MessageBoxOptions {
title?: string;
closeOnClickModal?: boolean;
[propName: string]: any
}
export function useMessageBox() {
const showCustomMessageBox = (options: MessageBoxOptions) => {
const {
messageMain = '', // 文本内容
iconCnt, // 图标组件
customClass = 'custom-message-box', //MessageBox 的自定义类名
} = options;
return new Promise<void>((resolve, reject) => {
const MessageBoxConstructor = ElMessageBox as any;
MessageBoxConstructor({
...options,
closeOnClickModal,
customClass,
title,
message: `<div class="message-content">
<div class="icon-class"></div>
<div class="title-class">${messageMain}</div>
</div>`,
callback: (action: string) => {
if (action === 'confirm') {
resolve();
} else {
reject();
}
},
dangerouslyUseHTMLString: true, //是否将 message 作为 HTML 片段处理
})
nextTick(() => {
const app = createApp(iconCnt) //创建实例
app.mount('.el-message-box__message .icon-class') //挂载
});
})
};
return {
showCustomMessageBox,
};
}
二、调用
<template>
<div class="about">
<el-button @click="showMessageBox">这是一个自定义消息弹框</el-button>
</div>
</template>
<script setup lang="ts">
import { useMessageBox } from '@/hooks/UseMeeageBox';
import Test from '@/components/test.vue'
const { showCustomMessageBox } = useMessageBox();
const showMessageBox = () => {
showCustomMessageBox({
// messageMain: '你好',
iconCnt: Test,
title: '',
center: true,
}).then(() => {
console.log(123);
}).catch(() => {
console.log(222);
})
};
</script>
<style lang="scss" scoped></style>
三、效果图
我们可以将编辑好的组件直接引入,显示在messageBox中
GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:2 个月前 )
c345bb45
6 个月前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 7 个月前
更多推荐
已为社区贡献2条内容
所有评论(0)