fix(settings): close dropdown after choosing icon

zio/stable
三咲智子 2023-01-03 05:09:15 +08:00
parent ddb6e90e21
commit 5dffd380b0
No known key found for this signature in database
GPG Key ID: 69992F2250DFD93E
2 changed files with 14 additions and 3 deletions

View File

@ -7,8 +7,13 @@ defineProps<{
const dropdown = $ref<any>() const dropdown = $ref<any>()
const colorMode = useColorMode() const colorMode = useColorMode()
const hide = () => dropdown.hide()
provide(dropdownContextKey, { provide(dropdownContextKey, {
hide: () => dropdown.hide(), hide,
})
defineExpose({
hide,
}) })
</script> </script>

View File

@ -6,18 +6,24 @@ const { form } = defineModel<{
fieldsAttributes: NonNullable<UpdateCredentialsParams['fieldsAttributes']> fieldsAttributes: NonNullable<UpdateCredentialsParams['fieldsAttributes']>
} }
}>() }>()
const dropdown = $ref<any>()
const fieldIcons = computed(() => const fieldIcons = computed(() =>
Array.from({ length: 4 }, (_, i) => Array.from({ length: 4 }, (_, i) =>
getAccountFieldIcon(form.value.fieldsAttributes[i].name), getAccountFieldIcon(form.value.fieldsAttributes[i].name),
), ),
) )
const chooseIcon = (i: number, text: string) => {
form.value.fieldsAttributes[i].name = text
dropdown[i]?.hide()
}
</script> </script>
<template> <template>
<div flex="~ col gap4"> <div flex="~ col gap4">
<div v-for="i in 4" :key="i" flex="~ gap3" items-center> <div v-for="i in 4" :key="i" flex="~ gap3" items-center>
<CommonDropdown placement="left"> <CommonDropdown ref="dropdown" placement="left">
<CommonTooltip content="Pick a icon"> <CommonTooltip content="Pick a icon">
<button btn-action-icon> <button btn-action-icon>
<div :class="fieldIcons[i - 1] || 'i-ri:question-mark'" /> <div :class="fieldIcons[i - 1] || 'i-ri:question-mark'" />
@ -31,7 +37,7 @@ const fieldIcons = computed(() =>
:content="text" :content="text"
> >
<template v-if="text !== 'Joined'"> <template v-if="text !== 'Joined'">
<div btn-action-icon @click="form.fieldsAttributes[i - 1].name = text"> <div btn-action-icon @click="chooseIcon(i - 1, text)">
<div text-xl :class="icon" /> <div text-xl :class="icon" />
</div> </div>
</template> </template>