前端:每天一个工作小技巧 如何去封装一个弹框组件（Vue3+element plus）

前言

大家好 在我们的日常工作中 我们会遇到各种各样的封装组件 今天我们就以如何
封装一个弹框组件为例展开我们的一个教学

技术栈

这边我们的技术栈就用我们的vue3+element plus为例吧 毕竟 在目前这个
市场 Vue还是比较主流的

思路

首先我们解题需要我们的一个思路 有了思路之后 我们就能够更好的解决问题
但是解决问题的方法也是有很多种 这是我们所知道的

重点来了

如何分析解决问题 是我们所要了解的 毕竟有句话给你一条鱼 不如教你捕鱼的
技术 实操吧 不要偷懒 在我建好的项目加个路由

<el-menu-item-group>
                <template #title>弹框</template>
                <el-menu-item index="/tags">弹框管理</el-menu-item>
                </el-menu-item-group>

{
        path: '/dialog',
        component: () => import('../views/Dialog/index.vue'),
        name: 'Dialog',
        meta: {
          hidden: true,
        },
      }

效果

 

子组件

<script setup lang="ts">
import { reactive, watch, ref } from 'vue'
import { ElFormItem, ElInput, ElDialog } from 'element-plus'


const props = defineProps({
    dialogVisible: {
        type: Boolean,
        default: () => false
    },
})
var dialogVisibleOn = ref()
var form = reactive({
    ticketIndex: ""
})
watch(
    () => props?.dialogVisible,
    async (val) => {
        dialogVisibleOn.value = props.dialogVisible
        form.ticketIndex = props?.dialogVisible?"1":"2"
    },
    {
        deep: true,
        immediate: true
    }
)
const ruleFormRef = ref()
const getFormData = () => {
    return form
}
defineExpose({
    getFormData: getFormData,
    ruleFormRef: ruleFormRef
})
const emit = defineEmits(['changeButton'])
const handlechange = (val:any) => {
    emit('changeButton', false)
}
</script>
<template>
    <ElDialog v-model="dialogVisibleOn">
        <el-form-item prop="ticketIndex" label="名称">
            <el-input v-model="form.ticketIndex" @change="handlechange">
                <template #prepend>#</template>
            </el-input>
        </el-form-item>
    </ElDialog>
</template>
<style lang="scss" scoped>
.form-color {
    width: 20px;
    height: 20px;
    margin-left: 4px;
}


.form-color-active {
    width: 20px;
    height: 20px;
    margin-left: 4px;
    border: 1px solid #ccc;
}


.color-setting-box {
    width: 240px;
    height: 92px;
    margin: 0 24px 0 0;
    border: 1px solid #e6e9f0;
    border-radius: 8px 8px 8px 8px;


    .color-setting-label {
        display: flex;
        width: 240px;
        height: 40px;
        background: #f5f6f7;
        border: 1px solid #e6e9f0;
        border-radius: 8px 8px 0px 0px;
        align-items: center;
        justify-content: center;
    }


    .color-setting-content {
        display: flex;
        align-items: center;
        width: 240px;
        height: 52px;
        border-radius: 0px 0px 0px 0px;
    }
}
</style>

父组件

<script setup lang="ts">
import { ElButton, ElDialog } from 'element-plus';
import { ref } from 'vue';
import DialogInput from './dialogInput.vue';
const dialogVisible=ref(false)
const handleClick=()=>{
    dialogVisible.value = true
}
const changeButton=(val)=>{
    dialogVisible.value=val
}
</script>


<template>
    <ElButton @click="handleClick">打开弹框</ElButton>
    <DialogInput @changeButton="changeButton" :dialogVisible="dialogVisible"></DialogInput>
</template>

重点

需要我们在组件设计的时候考虑如何传入和传出值

实现效果

总结

这样 我们就实现了点击弹窗开启 失去焦点弹框关闭的效果 注意就是暴露出的属性
传入的值和传出的值 综合即可

末尾