需求
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.将弹出框定位到input元素下面
2.监听input元素的focus事件