vue3使用tsx自定义弹窗组件

1.在ts代码中使用css

我这里使用了@styils/vue，npm install @styils/vue --save-dev，在tsx文件中引入即可：import { styled } from "@styils/vue";

2.在tsx中初始化组件，创建在src的utils目录中创建messagebox.tsx

import { createApp} from "vue";
// 这里使用了element-plus的组件，请自行引入即可
import { ElButton } from "element-plus";
import { styled } from "@styils/vue";const DivModal = styled('div', {position: 'fixed',width: '100%',height: '100%',left: 0,top: 0,background: '#00000050',display: 'flex',justifyContent: 'center',alignItems: 'center'
});const DivBox = styled('div', {display: 'flex',minWidth: '25%',background: '#fff',padding: '10px 0',color: '#333',borderRadius: '10px',boxShadow: '0 0 3px #00000080',flexDirection: 'column',alignItems: 'center'
});const DivText = styled('div', {marginBottom: '1em'
});const Messagebox = {props: {msg: {type: String,required: true},},render(ctx: any) {const { $props, $emit } = ctx;return (<DivModal class="modal"><DivBox class="box"><DivText class="text">{$props.msg}</DivText><div onClick={$emit('onClick(e)')}><ElButton type="primary">确 定</ElButton></div></DivBox></DivModal>);},
};export function showMsg(msg: String, isModal: Boolean | null, onClickHandler: Function) {const div = document.createElement("div");document.body.appendChild(div);const app = createApp(Messagebox,{msg,onClick(e: any) {if (isModal) {onClickHandler(() => {app.unmount();div.remove();});} else {const isButton = e.target.localName === "button" || e.target.innerText === "确定";if (isButton) {onClickHandler(() => {app.unmount();div.remove();});}}}});app.mount(div);
};

3.在vue中使用该组件

<template><el-button type="primary" @click="showTsxMsg">显示tsx封装的弹窗</el-button>
</template><script lang="ts" setup>
import { showMsg } from "@/utils/messagebox";const showTsxMsg = () => {showMsg("tsx封装的组件", true, (close: Function) => {close();});
};
</script>