Skip to content

修复search组件，如果没下载图标库的话，搜索按钮会显示空白 (close #495) #1412

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Oct 13, 2022
Merged

修复search组件，如果没下载图标库的话，搜索按钮会显示空白 (close #495) #1412

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
98f490d
fix(search): 修复search组件，如果没下载图标库的话，搜索按钮会显示空白 (close #495)
vaebe Oct 10, 2022
0cf253c
fix(search): 移除 icon 组件的引入
vaebe Oct 10, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 11 additions & 0 deletions packages/devui-vue/devui/search/src/components/search-close-icon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
const SearchCloseIcon = (): JSX.Element => (
<svg viewBox="0 0 1024 1024" width="12px" height="12px">
<path
d="M940.8 207.530667L818.602667 85.333333l-305.493334 305.493334L207.616 85.333333 \
85.333333 207.530667l305.493334 305.493333L85.333333 818.517333l122.282667 122.282667 \
305.493333-305.493333 305.493334 305.493333 122.197333-122.282667-305.493333-305.493333z"
p-id="30810"
></path>
</svg>
);
export default SearchCloseIcon;
10 changes: 10 additions & 0 deletions packages/devui-vue/devui/search/src/components/search-icon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
const SearchIcon = (): JSX.Element => (
<svg viewBox="0 0 1024 1024" version="1.1" width="12px" height="12px">
<path
d="M1005.312 914.752l-198.528-198.464A448 448 0 1 0 0 448a448 448 0 0 0 716.288 \
358.784l198.4 198.4a64 64 0 1 0 90.624-90.432zM448 767.936A320 320 0 1 1 448 128a320 320 0 0 1 0 640z"
fill="#262626" p-id="32547"
></path>
</svg>
);
export default SearchIcon;
40 changes: 21 additions & 19 deletions packages/devui-vue/devui/search/src/search.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,18 +44,23 @@
}
}

svg.svg-icon-clear path,
svg.svg-icon-search path {
fill: $devui-icon-text;
&__clear,
&__icon {
@include size($devui-size-md, $devui-size-md);
@include flex;

& svg {
path {
fill: $devui-icon-fill;
}
@include size($devui-font-size-md, $devui-font-size-md);
}
}

&__clear {
position: absolute;
right: $devui-size-md;
cursor: pointer;
height: 100%;
@include size($devui-size-md, $devui-size-md);
@include flex;

&::after {
content: '';
Expand All @@ -76,9 +81,6 @@
z-index: 1;
right: 0;
top: 0;
width: $devui-size-md;
height: $devui-size-md;
@include flex;
}

&--sm {
Expand All @@ -91,15 +93,15 @@
}
}

.#{$devui-prefix}-search__icon {
font-size: $devui-font-size-sm;
.#{$devui-prefix}-search__icon, .#{$devui-prefix}-search__clear {
@include size($devui-size-sm, $devui-size-sm);

svg {
@include size($devui-font-size-sm, $devui-font-size-sm);
}
}

.#{$devui-prefix}-search__clear {
font-size: $devui-font-size-sm;
@include size($devui-size-sm, $devui-size-sm);

right: $devui-size-sm;
}
}
Expand All @@ -114,15 +116,15 @@
}
}

.#{$devui-prefix}-search__icon {
font-size: $devui-font-size-lg;
.#{$devui-prefix}-search__icon, .#{$devui-prefix}-search__clear {
@include size($devui-size-lg, $devui-size-lg);

svg {
@include size($devui-font-size-lg, $devui-font-size-lg);
}
}

.#{$devui-prefix}-search__clear {
font-size: $devui-font-size-lg;
@include size($devui-size-lg, $devui-size-lg);

right: $devui-size-lg;
}
}
Expand Down
9 changes: 5 additions & 4 deletions packages/devui-vue/devui/search/src/search.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,11 @@ import { getRootClass } from './composables/use-search-class';
import { keywordsHandles } from './composables/use-search-keywords';
import { keydownHandles } from './composables/use-search-keydown';
import DInput from '../../input/src/input';
import { Icon } from '../../icon';
import { useNamespace } from '../../shared/hooks/use-namespace';
import './search.scss';
import { createI18nTranslate } from '../../locale/create';
import SearchCloseIcon from './components/search-close-icon';
import SearchIcon from './components/search-icon';

export default defineComponent({
name: 'DSearch',
Expand Down Expand Up @@ -54,18 +55,18 @@ export default defineComponent({
<label class={rootClasses.value}>
{props.iconPosition === 'left' && (
<div class={ns.e('icon')} onClick={onClickHandle}>
<Icon name="search" size="inherit" key="search"></Icon>
<SearchIcon></SearchIcon>
</div>
)}
<DInput {...inputProps}></DInput>
{clearIconShow.value && (
<div class={ns.e('clear')} onClick={onClearHandle}>
<Icon name="close" size="inherit" key="close"></Icon>
<SearchCloseIcon></SearchCloseIcon>
</div>
)}
{props.iconPosition === 'right' && (
<div class={ns.e('icon')} onClick={onClickHandle}>
<Icon name="search" size="inherit" key="search"></Icon>
<SearchIcon></SearchIcon>
</div>
)}
</label>
Expand Down