merge

src/component/iconPicker/index.less

@@ -53,6 +53,7 @@
   font-size: 14px;
   color: rgba(0, 0, 0, 0.5);
   transition: all 0.3s;
+  display: inline-block;
 }
 
 .layui-iconpicker-down .layui-iconpicker-suffix .layui-icon-down {
@@ -151,6 +152,15 @@
   display: none;
 }
 
+.layui-icon-picker-clear {
+  color: rgba(0, 0, 0, 0.45);
+  padding: 0px 0px 0px 10px;
+}
+
+.layui-icon-picker-clear:hover {
+  opacity: 0.6;
+}
+
 .layui-colorpicker-disabled {
   opacity: 0.6;
 }
@@ -158,4 +168,8 @@
 .layui-colorpicker-disabled,
 .layui-colorpicker-disabled * {
   cursor: not-allowed !important;
+}
+
+.transform{
+  transform: rotate(180deg);
 }

src/component/iconPicker/index.vue

@@ -17,6 +17,7 @@ export interface IconPickerProps {
   modelValue?: string;
   disabled?: boolean;
   showSearch?: boolean;
+  allowClear?: boolean;
   contentClass?: string | Array<string | object> | object;
   contentStyle?: StyleValue;
 }
@@ -30,6 +31,7 @@ const props = withDefaults(defineProps<IconPickerProps>(), {
 const emit = defineEmits(["update:modelValue", "change"]);
 const selectedIcon = computed(() => props.modelValue);
 const dropdownRef = ref<any>(null);
+const openState = ref<boolean>(false);
 
 const selectIcon = function (icon: string): void {
   emit("update:modelValue", icon);
@@ -37,6 +39,14 @@ const selectIcon = function (icon: string): void {
   dropdownRef.value?.hide();
 };
 
+const onClear = function (): void {
+  emit("update:modelValue", "");
+};
+
+const hasContent = computed(() => {
+  return props.modelValue != null && props.modelValue != "";
+});
+
 const icones: Ref = ref([]);
 const total: Ref<number> = ref(icons.length);
 const totalPage: Ref<number> = ref(total.value / 12);
@@ -143,6 +153,8 @@ const searchList = (str: string, container: any) => {
     :disabled="disabled"
     :contentClass="contentClass"
     :contentStyle="contentStyle"
+    @hide="openState = false"
+    @show="openState = true"
     updateAtScroll
   >
     <div
@@ -152,8 +164,17 @@ const searchList = (str: string, container: any) => {
       <div class="layui-inline layui-iconpicker-main">
         <i class="layui-inline layui-icon" :class="[selectedIcon]"></i>
       </div>
+      <span
+        class="layui-icon-picker-clear"
+        v-if="allowClear && hasContent && !disabled"
+      >
+        <lay-icon type="layui-icon-close-fill" @click.stop="onClear"></lay-icon>
+      </span>
       <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>
     </div>
     <template #content>