vue3项目,有一个侧边弹框的功能,组件库里面没有找到,手撸一个。
要点有两个。具名插槽和点击空白处关闭
先上代码
<template>
<Transition name="slideDialog">
<div class="slide_box_content" v-show="show" ref="slide_box_content">
<div class="slideDialog_content">
<div class="flex_box between slide_head">
<div class="left">
<slot name="header">历史对话</slot>
</div>
<div class="right">
<Close
style="width: 15px; height: 15px"
class="cursor"
@click="close"
/>
</div>
</div>
<main>
<slot></slot>
</main>
<footer>
<slot name="footer"></slot>
</footer>
</div>
</div>
</Transition>
</template>
<script lang="ts" setup>
import { ref, watch, onBeforeUnmount } from 'vue'
import { Close } from '@element-plus/icons-vue'
const prop = defineProps({
show: Boolean
})
const emit = defineEmits(['update:show'])
const slide_box_content = ref()
const close = () => {
emit('update:show', false)
document.body.removeEventListener('click', clickClose)
}
const clickClose = (event: MouseEvent) => {
if (
event.target === slide_box_content.value ||
slide_box_content.value.contains(event.target)
) {
} else {
emit('update:show', false)
document.body.removeEventListener('click', clickClose)
}
}
watch(
() => prop.show,
(value) => {
if (value === true) {
setTimeout(() => {
document.body.addEventListener('click', clickClose)
}, 0)
}
}
)
onBeforeUnmount(() => {
document.body.removeEventListener('click', clickClose)
})
</script>
<style lang="less" scoped>
.slideDialog-enter-active {
transition: all 0.5s ease-out;
}
.slideDialog-leave-active {
transition: all 0.1s ease-out;
}
.slideDialog-enter-from {
transform: translateX(-500px);
opacity: 0;
}
.slideDialog-leave-to {
transform: scaleX(0);
}
.slide_box_content {
position: absolute;
top: 20px;
left: 20px;
.slideDialog_content {
background-color: white;
padding: 20px;
border-radius: 10px;
min-width: 100px;
}
}
</style>
组件的使用
<slideDialog v-model:show="historyShow">
<template #header> header </template>
这里是Body
<template #footer> footer </template>
</slideDialog>
这里是展现出来的效果
这里实现了可以自定义头部,尾部和主题内容的功能,通过默认插槽和具名插槽,自带了一个右上角的关闭按钮。
这个弹框最核心的功能是点击空白处关闭,下面看看怎么实现的
- 首先是监听show的变化,当show为true,也就是弹框要打开的时候,给body加一个click的事件监听器
watch(
() => prop.show,
(value) => {
if (value === true) {
setTimeout(() => {
document.body.addEventListener('click', clickClose)
}, 0)
}
}
)
- 监听的核心是判断是不是点击的弹框或者弹框内部的元素,如果不是,就关闭弹框
const clickClose = (event: MouseEvent) => {
if (
event.target === slide_box_content.value ||
slide_box_content.value.contains(event.target)
) {
} else {
emit('update:show', false)
document.body.removeEventListener('click', clickClose)
}
}
- 接着是每次关闭弹框的时候 ,要移除Body的这个事件监听,因为外面的触发元素并不属于弹框,如果不移除,弹框就再也点不开了,会一直触发关闭
const close = () => {
emit('update:show', false)
document.body.removeEventListener('click', clickClose)
}
这样一个简单的侧弹框就实现了
动画效果
这里我们借助了vue3的transition组件加上了弹框出现和关闭的动画效果,可以自行改造