在input元素下面做一个弹出框，点击弹出框弹出框不消失，点击其他地方弹出框消失

需求

1.点击input弹出弹出框
2.点击弹出框的文字弹出框不消失
3.点击弹出框以外的地方弹出框消失

做法

<script setup lang="ts">
import { withDefaults, defineProps, ref, computed } from 'vue'

const wrapRef = ref<HTMLDivElement | null>(null)
const shouldPopShow = ref<boolean>(false)
const isSelect = ref<boolean>(false)

const onFocus = () => {
  wrapRef.value?.classList.add('wrap-focus')
  shouldPopShow.value = true
}
const onBlur = () => {
  //这里是关键，关闭弹窗应当是有条件的关闭，只有条件为false是才关闭
  if (!isSelect.value) {
    wrapRef.value?.classList.remove('wrap-focus')
    shouldPopShow.value = false
  }
}
const popBlur = () => {
  //弹窗在onblur后将条件变成false,并手动关闭弹窗
  isSelect.value = false
  wrapRef.value?.classList.remove('wrap-focus')
  shouldPopShow.value = false
}
const userSelect = (e: Event) => {
  //弹窗被点击时要把条件改成true
  isSelect.value = true
}
script>

<template>
  <div>
    <label tabindex="-1" ref="wrapRef">
      <input type="text" :value="value" @focus="onFocus" @blur="onBlur" readonly />
    label>
    <div
      tabindex="-1"
      :class="{ 'timePicker-pop-show': shouldPopShow }"
      @mousedown="userSelect"
      @blur="popBlur"
      ref="popRef"
    >
      
    div>
  div>
template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

思路：

1.将弹出框定位到input元素下面
2.监听input元素的focus事件