📝(icon-picker): 新增 allow-clear 属性, 开启清空操作

package/component/src/component/iconPicker/index.less

@@ -152,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;
 }

package/component/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;
 }
@@ -38,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);
@@ -155,6 +164,12 @@ 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"

package/component/src/component/tabItem/index.vue

@@ -11,7 +11,7 @@ import {
   useSlots,
   getCurrentInstance,
   reactive,
-  onBeforeUnmount,
+  onBeforeUnmount
 } from "vue";
 import { TabInjectKey, TabsContext } from "../tab/interface";