如何快速封装简单的弹窗组件？
一、首先在src文件夹内的components文件中创建一个demoDialog.vue
二 、在demoDialog.vue页面中将弹出层、提示消息等样式写好
三 、在demoDialog.vue中先把要接收的值和类型填写好
四、在demoDialog.vue中把关闭弹窗的函数或其他需要自定义的函数写好
五 、在父组件中引用demoDialog.vue，使用自定义事件将值传给子组件
至此，一个简单的弹框组件就完成啦
希望能帮到刚好需要的小伙伴
下方为demoDialog.vue的界面
<template><el-dialog v-model="props.visible" title="提示" top="15vh" width="30%" :before-close="handleClose"><span> 填写的内容为: {{ props.inputContent }} </span></el-dialog></template><script setup lang="ts">//从父组件获取到的值let props = defineProps({inputContent:String,visible:Boolean})//将关闭事件传回给父组件，用于关闭弹窗事件const emit = defineEmits()function handleClose(){emit('closeDialog')}</script><style lang="scss" scoped></style>
下方为父组件调用时的界面
<template><div class="eleBox"><el-input v-model="inputContent" placeholder="请输入内容"></el-input><button @click="showDialog()">显示弹窗</button><demos :inputContent="inputContent" :visible="visible" @closeDialog="closeDialog" /></div></template><script lang="ts" setup>import { ref } from 'vue'import demos from './demos.vue';//双向绑定的值let inputContent = ref('')//控制弹窗的显影let visible = ref(false)//打开弹窗function showDialog(){visible.value = true}//关闭弹窗function closeDialog(){visible.value = false}</script><style lang="scss" scoped>.eleBox{width: 100%;height: 100%;}</style>
