如何快速封装简单的弹窗组件?
一、首先在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>