📝(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";
 

package/document-component/src/document/zh-CN/components/iconPicker.md

@@ -59,6 +59,32 @@ export default {
 
 :::
 
+::: title 选择清空
+:::
+
+::: demo 使用 lay-icon-picker 标签, 创建图标选择器
+
+<template>
+  <lay-icon-picker v-model="icon" :allow-clear="true"></lay-icon-picker>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+
+    const icon = ref("layui-icon-home")
+
+    return {
+      icon
+    }
+  }
+}
+</script>
+
+:::
+
 ::: title 开启分页
 :::
 
@@ -116,12 +142,13 @@ export default {
 
 ::: table
 
-|            |          |     |   |   |
+| 属性           |  说明        |  类型   | 默认值  | 可选值  |
 | ---------- | -------- | --- |--- |--- |
 | v-model    | 默认值   | --  |--  |--  |
 | page       | 开启分页 | --  |--  |--  |
 | showSearch | 启用搜索 | --  |--  |--  |
 | disabled | 禁用 | `boolean`  |--  |--  |
+| allow-clear | 允许清空 | `boolean`  |--  |--  |
 | contentStyle             | 内容自定义样式     | `StyleValue` | -- | -- |
 | contentClass             | 内容自定义Class    | `string` `Array<string \| object>` `object` | -- | -- |
 

package/document-component/src/document/zh-CN/guide/changelog.md

@@ -16,6 +16,7 @@
       <li> 
         <h3>1.7.11 <span class="layui-badge-rim">2022-12-05</span></h3> 
         <ul>
+          <li>[新增] icon-picker 组件 allow-clear 属性, 开启清空操作。</li>
           <li>[修复] button 组件 夜间模式 下, 普通按钮边框高亮与背景色不一致的问题。</li>
           <li>[优化] checkbox 组件 默认主题 下, 勾选框多余的左边框。</li>
           <li>[优化] icon-picker 组件 下拉 图标, 在打开关闭时赋予不同的状态。</li>