Issue #93: Done.

This commit is contained in:
chiayin
2023-09-26 13:40:51 +08:00
parent 349e565696
commit 442a7168b6

View File

@@ -1,6 +1,6 @@
<template> <template>
<div class="relative"> <div class="relative">
<div class="w-32 px-1 border border-neutral-500 cursor-pointer" @click="openTimeSelect = !openTimeSelect" id="timeButton"> <div class="w-32 px-1 border border-neutral-500 cursor-pointer" @click="openTimeSelect = !openTimeSelect" :id="size">
<div v-if="totalSeconds === 0" class="text-center"> <div v-if="totalSeconds === 0" class="text-center">
<p>0</p> <p>0</p>
</div> </div>
@@ -11,8 +11,7 @@
<p>{{ seconds }}s</p> <p>{{ seconds }}s</p>
</div> </div>
</div> </div>
<!-- v-closable="onClose" --> <div class="duration-container absolute left-0 top-full translate-y-2" v-show="openTimeSelect" v-closable="{id: size, handler: onClose}">
<div class="duration-container absolute left-0 top-full translate-y-2" v-show="openTimeSelect" v-closable="onClose">
<div class="duration-box" v-for="(unit, index) in inputTypes" :key="unit"> <div class="duration-box" v-for="(unit, index) in inputTypes" :key="unit">
<input <input
type="text" type="text"
@@ -336,11 +335,11 @@ export default {
mounted(el, {value}) { mounted(el, {value}) {
let handleOutsideClick = function(e) { let handleOutsideClick = function(e) {
let target = e.target; let target = e.target;
while (target && target.id !== 'timeButton') { while (target && target.id !== value.id) {
target = target.parentElement; target = target.parentElement;
}; };
const isClickOutside = target?.id !== 'timeButton' && !el.contains(e.target) const isClickOutside = target?.id !== value.id && !el.contains(e.target)
if (isClickOutside) value(); if (isClickOutside) value.handler();
e.stopPropagation(); e.stopPropagation();
} }
document.addEventListener('click', handleOutsideClick); document.addEventListener('click', handleOutsideClick);
@@ -348,7 +347,6 @@ export default {
document.removeEventListener('click', handleOutsideClick); document.removeEventListener('click', handleOutsideClick);
}; };
}, },
} }
}, },