前言
大家好 在我们的日常工作中 我们会遇到各种各样的封装组件 今天我们就以如何
封装一个弹框组件为例展开我们的一个教学
技术栈
这边我们的技术栈就用我们的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>
重点
需要我们在组件设计的时候考虑如何传入和传出值
实现效果
总结
这样 我们就实现了点击弹窗开启 失去焦点弹框关闭的效果 注意就是暴露出的属性
传入的值和传出的值 综合即可
末尾