1 基于element-plus的二次封装弹窗很常见。代码如下:
父组件:
import Dialog from './components/Dialogs/testDailog.vue'
const show=ref(false)
const openDialog=()=>{
show.value=true
}
<button @click="openDialog" >打开dialoag</button>
<Dialog v-model="show"/>
弹窗的内容:
<template>
<el-dialog
v-model="visible"
title="Tips"
width="30%"
@close="handerClose"
>
<P>This is a message</P>
<P>This is a message</P>
<P>This is a message</P>
<P>This is a message</P>
<P>This is a message</P>
<P>This is a message</P>
<P>This is a message</P>
<el-button @click="cancel">取消</el-button>
<el-button @click="confirm">确定</el-button>
</el-dialog>
</template>
<script setup lang='ts'>
import { ref, reactive, watch, onMounted, onUnmounted } from 'vue'
const emits=defineEmits(['close','confirm','update:modelValue'])
const props=defineProps({
modelValue:{
type:Boolean,
default:false
}
})
const visible=ref(false)
const cancel=()=>{
emits('update:modelValue',false)
}
const confirm=()=>{
emits('update:modelValue',false)
}
const handerClose=()=>{
console.log("点击关闭按钮");
emits('update:modelValue',false)
}
watch(()=>props.modelValue,(newVal)=>{
visible.value=newVal;
console.log("props.modelValue",props.modelValue);
emits('update:modelValue',newVal)
})
</script>
<style lang='scss' scoped>
</style>
到这基本上就可以实现了。这一版的特点就是弹窗的关闭时其实本身没有销毁。我们是通过双向绑定跟新了弹窗的状态
但是我们考虑一个场景,就是表单弹窗复用。新增和编辑态我们要做区分。这时候我们手动传属性标识是编辑还是新增就很麻烦。有一个简单的办法就是我们在关闭弹窗时直接把它销毁,这样每次我们只需要在生命周期的onMounted中判断是否有id传过来就可以了。如果有id则说明是编辑态。否则是新增的场景。这样就很容易区分。我们改造下代码:
改进版
销毁弹窗我们通过v-if来控制
父组件
<button @click="openDialog" >打开dialoag</button>
<Dialog v-if="show" v-model="show"/>
//注意这里增加了v-if
弹窗组件
<template>
<el-dialog
v-model="visible"
title="Tips"
width="30%"
@close="handerClose"
>
<P>This is a message</P>
<P>This is a message</P>
<P>This is a message</P>
<P>This is a message</P>
<P>This is a message</P>
<P>This is a message</P>
<P>This is a message</P>
<el-button @click="cancel">取消</el-button>
<el-button @click="confirm">确定</el-button>
</el-dialog>
</template>
<script setup lang='ts'>
import { ref, reactive, watch, onMounted, onUnmounted } from 'vue'
const emits=defineEmits(['close','confirm','update:modelValue'])
const props=defineProps({
modelValue:{
type:Boolean,
default:false
}
})
const visible=ref(props.modelValue)
const cancel=()=>{
emits('update:modelValue',false)
}
const confirm=()=>{
emits('update:modelValue',false)
}
const handerClose=()=>{
console.log("点击关闭按钮");
emits('update:modelValue',false)
}
onMounted(()=>{
console.log("挂载");
})
onUnmounted(()=>{
console.log("卸载");
})
watch(()=>props.modelValue,(newVal)=>{
visible.value=newVal;
console.log("props.modelValue",props.modelValue);
emits('update:modelValue',newVal)
})
</script>
<style lang='scss' scoped>
</style>
在组件内部,我们通过定义visible,初始状态和props.modelValue绑定,后续跟新在watch里同步,这样就可以实现每次销毁和挂载
注意:
const visible=ref(props.modalValue),定义visible的时候一定要先和props.modalValue进行绑定。不然父组件点击不会弹出来