🐛 修复 icon-picker 选择图标自动隐藏内容
This commit is contained in:
@@ -1,3 +1,49 @@
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: "LayDropdown"
|
||||
}
|
||||
</script>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { defineProps, provide, ref, watch } from 'vue'
|
||||
import { useClickOutside } from '@layui/hooks-vue'
|
||||
|
||||
const dropdownRef = ref<null | HTMLElement>(null)
|
||||
const isClickOutside = useClickOutside(dropdownRef)
|
||||
|
||||
export interface LayDropdownProps {
|
||||
trigger?: string
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<LayDropdownProps>(),{
|
||||
trigger: 'click',
|
||||
})
|
||||
|
||||
const openState = ref(false)
|
||||
|
||||
const open = function () {
|
||||
openState.value = true
|
||||
}
|
||||
|
||||
const hide = function () {
|
||||
openState.value = false
|
||||
}
|
||||
|
||||
const toggle = function () {
|
||||
openState.value = !openState.value
|
||||
}
|
||||
|
||||
watch(isClickOutside, () => {
|
||||
if (isClickOutside.value) {
|
||||
openState.value = false
|
||||
}
|
||||
})
|
||||
|
||||
provide('openState', openState)
|
||||
|
||||
defineExpose({ open, hide, toggle });
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
v-if="trigger === 'click'"
|
||||
@@ -30,43 +76,4 @@
|
||||
</ul>
|
||||
</dl>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup name="LaySelect" lang="ts">
|
||||
import { defineProps, provide, ref, watch } from 'vue'
|
||||
import { useClickOutside } from '@layui/hooks-vue'
|
||||
|
||||
const dropdownRef = ref<null | HTMLElement>(null)
|
||||
const isClickOutside = useClickOutside(dropdownRef)
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
trigger?: string
|
||||
}>(),
|
||||
{
|
||||
trigger: 'click',
|
||||
}
|
||||
)
|
||||
|
||||
const openState = ref(false)
|
||||
|
||||
const open = function () {
|
||||
openState.value = true
|
||||
}
|
||||
|
||||
const hide = function () {
|
||||
openState.value = false
|
||||
}
|
||||
|
||||
const toggle = function () {
|
||||
openState.value = !openState.value
|
||||
}
|
||||
|
||||
watch(isClickOutside, () => {
|
||||
if (isClickOutside.value) {
|
||||
openState.value = false
|
||||
}
|
||||
})
|
||||
|
||||
provide('openState', openState)
|
||||
</script>
|
||||
</template>
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<lay-dropdown>
|
||||
<lay-dropdown ref="dropdownRef">
|
||||
<div
|
||||
class="
|
||||
layui-inline layui-border-box layui-iconpicker layui-iconpicker-split
|
||||
@@ -85,17 +85,18 @@
|
||||
import { defineProps, Ref, ref } from 'vue'
|
||||
import { LayIconList as icons } from "@layui/icons-vue"
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
modelValue?: string
|
||||
page?: boolean
|
||||
export interface LayIconPickerProps {
|
||||
page?: boolean,
|
||||
modelValue?: string,
|
||||
showSearch?: boolean
|
||||
}>(),
|
||||
{
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<LayIconPickerProps>(),{
|
||||
modelValue: 'layui-icon-face-smile',
|
||||
page: false,
|
||||
}
|
||||
)
|
||||
})
|
||||
|
||||
const dropdownRef = ref<null | HTMLElement>(null);
|
||||
|
||||
const emit = defineEmits(['update:modelValue'])
|
||||
|
||||
@@ -104,6 +105,8 @@ const selectedIcon: Ref<string> = ref(props.modelValue as string)
|
||||
const selectIcon = function (icon: string) {
|
||||
emit('update:modelValue', icon)
|
||||
selectedIcon.value = icon
|
||||
// @ts-ignore
|
||||
dropdownRef.value.hide()
|
||||
}
|
||||
|
||||
const icones: Ref = ref([])
|
||||
|
||||
Reference in New Issue
Block a user