代码附件
jsx 封装弹窗组件
import { createApp, defineComponent } from "vue";
import { styled } from '@styils/vue'
import { ElButton } from "element-plus";
const DivModal = styled('div', {
position: 'fixed',
width: '100%',
height: '100%',
left: 0,
top: 0,
Zindex: 99,
background: '#00000050',
display: 'flex',
justifyContent: 'center',
alignItems: 'center'
})
const DivBox = styled('div', {
minWidth: '30%',
background: '#fff',
padding: '10px 0',
color: '#333',
borderRadius: '10px',
boxShadow: '0 0 3px #00000080',
display: 'flex',
flexDirection: 'column',
alignItems: 'center'
})
const DivText = styled('div', {
marginBottom: '1em'
})
const MessageBox = defineComponent({
props: {
msg: {
type: String,
required: true
}
},
render(ctx) {
const { $props, $emit } = ctx;
// jsx 语法
return (
<DivModal>
<DivBox>
<DivText>{$props.msg}</DivText>
<ElButton type="primary" onClick={ $emit('onClick') }>按钮</ElButton>
</DivBox>
</DivModal>
)
}
});
export function showMsg(msg, cbFn) {
const div = document.createElement('div');
document.body.appendChild(div);
// 渲染组件到界面上
const app = createApp(MessageBox, {
msg,
onClick() {
cbFn(() => {
app.unmount();
div.remove();
});
}
});
app.mount(div);
}
函数调用的方式使用
<template>
<el-button type="primary" @click="onClick">打开弹窗</el-button>
</template>
<script>
import { showMsg } from '/src/utils/message.js';
export default {
setup() {
const onClick = () => {
showMsg('你好', (closeFn) => {
closeFn();
console.log('关闭了弹窗');
});
};
return { onClick };
},
};
</script>
打赏作者
您的打赏是我前进的动力
微信
支付宝
进阶技巧🕴️ 利用自定义 ref 实现防抖
上一篇
评论
