vue3 封装一个弹框，实现点击空白处关闭

原创已于 2023-07-28 11:29:15 修改 · 1.4k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

于 2023-07-27 14:18:55 首次发布

文章展示了如何在Vue3中手工创建一个侧边弹框组件，包括使用具名插槽定制头部和尾部，以及添加功能，使得点击组件外部时能自动关闭弹框。关键代码部分涉及事件监听、动态添加和移除事件及组件动画效果。

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组件加上了弹框出现和关闭的动画效果，可以自行改造