vue3.2自定义弹窗组件+函数式调用二合一 |
您所在的位置：网站首页 › vue3组件方法调用 › vue3.2自定义弹窗组件+函数式调用二合一 |
vue3.2自定义弹窗组件+函数式调用二合一
|
前言
涉及的vue3知识点/API，createApp defineProps defineEmits v-model 就是 setup 语法糖 defineProps 和 props 用法差不多 defineEmits 声明可向其父组件触发的事件 手写弹窗组件很简单的弹窗组件，支持设置标题 defineProps({ show: { type: Boolean, default: false }, title: { type: String, default: '' }, message: { type: String, default: '' } }) {{title}} {{message}} 確認 组件调用在需要使用的地方引入组件，v-model:show 相当于vue2写法的 :show.sync 前方指路 import { ref } from 'vue' import Dialog from '@/components/Dialog.vue' let show = ref(true) 函数式调用components目录下新建Dialog.js文件 将上面写好的组件引入，创建一个实例，挂载到body节点 import { createApp } from 'vue' import Dialog from '@/components/Dialog.vue' const createDialog = (message, option = {}) => { const mountNode = document.createElement('div') const Instance = createApp(Dialog, { show: true, message, ...option, close: () => { Instance.unmount(mountNode); document.body.removeChild(mountNode); } }) document.body.appendChild(mountNode) Instance.mount(mountNode) } export default createDialogcreateApp 第二个参数，是传递prop给组件，close方法用于点击确定移除弹窗，所以我们需要改造一下Dialog.vue，改造后的代码在下面含样式完整源码里，改造后就能实现组件调用和函数式调用合二为一了。 如何使用 import Dialog from '@/components/Dialog.js' // 无标题 Dialog('500 服務器錯誤，請稍候再試!'); // 有标题 Dialog('500 服務器錯誤，請稍候再試!', { title: '提示' }); 含样式完整源码Dialog.vue defineProps({ show: { type: Boolean, default: false }, title: { type: String, default: '' }, message: { type: String, default: '' }, close: { type: Function, default: fun => fun() } }) const emit = defineEmits(['update:show']) const handleClose = () => { emit('update:show', false) } {{title}} {{message}} 確認 .flex-center { display: flex; justify-content: center; align-items: center; } .dialog-mask { position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); z-index: 1000; } .dialog-box { background: #fff; width: 300px; border-radius: 10px; overflow: hidden; } .dialog-header { padding-top: 20px; font-weight: bold; text-align: center; } .dialog-content { padding: 5px 20px 20px 20px; font-size: 12px; text-align: center; white-space: pre-wrap; word-wrap: break-word; } .dialog-footer { display: flex; overflow: hidden; user-select: none; border-top: 1px solid #EBEDF0; } .button { display: inline-block; box-sizing: border-box; text-align: center; width: 100%; line-height: 40px; background-color: #fff; } .button:active { background-color: #f2f3f5; } .dialog-confirm { color: #409EFF; } 效果图 |
【本文地址】
今日新闻 |
推荐新闻 |