theluyuan/layui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

🌀(icon-picker): 优化 icon-picker 下拉动效

Browse Source
This commit is contained in:
就眠儀式 2022-12-05 02:43:37 +08:00
parent e0d8afae12
commit e48a8a5d2d
2 changed files with 9 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
package/component/src/component/iconPicker/index.less
View File

@ -53,6 +53,7 @@
font-size: 14px; font-size: 14px;
color: rgba(0, 0, 0, 0.5); color: rgba(0, 0, 0, 0.5);
transition: all 0.3s; transition: all 0.3s;
display: inline-block;
} }
.layui-iconpicker-down .layui-iconpicker-suffix .layui-icon-down { .layui-iconpicker-down .layui-iconpicker-suffix .layui-icon-down {
@ -159,3 +160,7 @@
.layui-colorpicker-disabled * { .layui-colorpicker-disabled * {
cursor: not-allowed !important; cursor: not-allowed !important;
} }
.transform{
transform: rotate(180deg);
}

5
package/component/src/component/iconPicker/index.vue
View File

@ -30,6 +30,7 @@ const props = withDefaults(defineProps<IconPickerProps>(), {
const emit = defineEmits(["update:modelValue", "change"]); const emit = defineEmits(["update:modelValue", "change"]);
const selectedIcon = computed(() => props.modelValue); const selectedIcon = computed(() => props.modelValue);
const dropdownRef = ref<any>(null); const dropdownRef = ref<any>(null);
const openState = ref<boolean>(false);
const selectIcon = function (icon: string): void { const selectIcon = function (icon: string): void {
emit("update:modelValue", icon); emit("update:modelValue", icon);
@ -143,6 +144,8 @@ const searchList = (str: string, container: any) => {
:disabled="disabled" :disabled="disabled"
:contentClass="contentClass" :contentClass="contentClass"
:contentStyle="contentStyle" :contentStyle="contentStyle"
@hide="openState = false"
@show="openState = true"
updateAtScroll updateAtScroll
> >
<div <div
@ -153,7 +156,7 @@ const searchList = (str: string, container: any) => {
<i class="layui-inline layui-icon" :class="[selectedIcon]"></i> <i class="layui-inline layui-icon" :class="[selectedIcon]"></i>
</div> </div>
<span class="layui-inline layui-iconpicker-suffix" <span class="layui-inline layui-iconpicker-suffix"
><i class="layui-icon layui-icon-down layui-anim"></i ><i class="layui-icon layui-icon-down" :class="[openState ? 'transform' : '']"></i
></span> ></span>
</div> </div>
<template #content> <template #content>