feat(CategorySearch): 支持自定义搜索图标

DevCloudFE · Apr 13, 2024 · 8c322db · 8c322db
1 parent 59bd9c2
commit 8c322db
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 46 deletions.
diff --git a/packages/devui-vue/devui/category-search/src/category-search.tsx b/packages/devui-vue/devui/category-search/src/category-search.tsx
@@ -12,51 +12,53 @@ import { useCategorySearch } from './composables/use-category-search';
 import './category-search.scss';
 
 export default defineComponent({
-	name: 'DCategorySearch',
-	props: categorySearchProps,
-	emits: ['search', 'selectedTagsChange', 'createFilter', 'clearAll', 'searchKeyChange'],
-	setup(props: CategorySearchProps, ctx: SetupContext) {
-		const {
-			rootRef,
-			scrollBarRef,
-			inputRef,
-			isHover,
-			containerClasses,
-			innerSelectedTags,
-			joinLabelTypes,
-			showExtendedConfig,
-			operationConfig,
-			onSearch,
-		} = useCategorySearch(props, ctx);
+  name: 'DCategorySearch',
+  props: categorySearchProps,
+  emits: ['search', 'selectedTagsChange', 'createFilter', 'clearAll', 'searchKeyChange'],
+  setup(props: CategorySearchProps, ctx: SetupContext) {
+    const {
+      rootRef,
+      scrollBarRef,
+      inputRef,
+      isHover,
+      containerClasses,
+      innerSelectedTags,
+      joinLabelTypes,
+      showExtendedConfig,
+      operationConfig,
+      onSearch,
+    } = useCategorySearch(props, ctx);
 
-		return () => (
-			<div
-				ref={rootRef}
-				class={containerClasses.value}
-				onMouseenter={() => (isHover.value = true)}
-				onMouseleave={() => (isHover.value = false)}>
-				<div class="dp-category-search-icon" onClick={onSearch}>
-					<SearchIcon />
-				</div>
-				<div ref={scrollBarRef} class="dp-category-search-line-container">
-					<ul class="dp-category-search-line">
-						{innerSelectedTags.value.map((item) => (
-							<CategorySearchTagDropdown item={item} isJoinLabelType={joinLabelTypes.includes(item.type || '')} />
-						))}
-						<CategorySearchInput ref={inputRef} />
-					</ul>
-				</div>
-				{showExtendedConfig.value && (
-					<div class="dp-category-search-extended-container">
-						{operationConfig.clear?.show && (
-							<>{ctx.slots.clear?.() ?? <CategorySearchClear disabled={operationConfig.clear?.disabled} />}</>
-						)}
-						{operationConfig.save?.show && <>{ctx.slots.save?.() ?? <CategorySearchSave disabled={operationConfig.save?.disabled} />}</>}
-						{operationConfig.more?.show && <>{ctx.slots.more?.() ?? <CategorySearchMore disabled={operationConfig.more?.disabled} />}</>}
-						{ctx.slots.operation?.()}
-					</div>
-				)}
-			</div>
-		);
-	},
+    return () => (
+      <div
+        ref={rootRef}
+        class={containerClasses.value}
+        onMouseenter={() => (isHover.value = true)}
+        onMouseleave={() => (isHover.value = false)}>
+        {ctx.slots.searchIcon?.() ?? (
+          <div class="dp-category-search-icon" onClick={onSearch}>
+            <SearchIcon />
+          </div>
+        )}
+        <div ref={scrollBarRef} class="dp-category-search-line-container">
+          <ul class="dp-category-search-line">
+            {innerSelectedTags.value.map((item) => (
+              <CategorySearchTagDropdown item={item} isJoinLabelType={joinLabelTypes.includes(item.type || '')} />
+            ))}
+            <CategorySearchInput ref={inputRef} />
+          </ul>
+        </div>
+        {showExtendedConfig.value && (
+          <div class="dp-category-search-extended-container">
+            {operationConfig.clear?.show && (
+              <>{ctx.slots.clear?.() ?? <CategorySearchClear disabled={operationConfig.clear?.disabled} />}</>
+            )}
+            {operationConfig.save?.show && <>{ctx.slots.save?.() ?? <CategorySearchSave disabled={operationConfig.save?.disabled} />}</>}
+            {operationConfig.more?.show && <>{ctx.slots.more?.() ?? <CategorySearchMore disabled={operationConfig.more?.disabled} />}</>}
+            {ctx.slots.operation?.()}
+          </div>
+        )}
+      </div>
+    );
+  },
 });
diff --git a/packages/devui-vue/docs/components/category-search/index.md b/packages/devui-vue/docs/components/category-search/index.md
@@ -391,6 +391,7 @@ export default defineComponent({
 | save         | 自定义保存图标                                                                                                      |                                                            |                                   |
 | more         | 自定义更多图标                                                                                                      |                                                            |                                   |
 | operation    | 自定义除`clear`、`save`、`more`外的其他图标                                                                         |                                                            | [自定义扩展按钮](#自定义扩展按钮) |
+| searchIcon   | 自定义搜索图标                                                                                                      |                                                            |                                   |
 
 ### CategorySearch 方法