VUE中简单封装弹窗组件

素质白嫖怪

已于 2023-08-03 16:34:14 修改

阅读量1k

点赞数 1

文章标签： vue.js javascript 前端

于 2023-02-26 16:58:04 首次发布

本文链接：https://blog.youkuaiyun.com/Working_hard_111/article/details/129228642

版权

如何快速封装简单的弹窗组件？

一、首先在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>