Skip to content

Commit 2adc0d1

Browse files
MNZhuMNZhu
authored
feat(search): refresh ui (#1469)
Signed-off-by: jacknan <zhumaonan@aliyun.com>
1 parent 5813c77 commit 2adc0d1

File tree

4 files changed

+49
-42
lines changed

4 files changed

+49
-42
lines changed

‎examples/sites/demos/mobile/app/search/base.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
<div>搜索栏</div>
66
</div>
77
<div class="title">primary</div>
8-
<tiny-search v-model="value" @search="handleSearch"></tiny-search>
8+
<tiny-search v-model="value" placeholder="搜索placeholder" @search="handleSearch"></tiny-search>
99
<div :class="[{ 'is-show': value }, 'searchbar-result']">
1010
{{ value }}
1111
</div>
@@ -59,7 +59,7 @@ export default {
5959
<style scoped>
6060
.mobile-search-demo {
6161
height: 100%;
62-
background: #f4f4f4;
62+
background: #fff;
6363
}
6464
.mobile-search-demo .title-demo {
6565
padding: 40px;

‎packages/theme-mobile/src/search/index.less

Lines changed: 14 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -30,12 +30,12 @@
3030
flex: auto;
3131
height: var(--ti-mobile-search-input-height);
3232
margin-left: 16px;
33-
border-radius: var(--ti-mobile-search-input-border-radius);
33+
border-radius: var(--ti-mobile-search-input-height);
3434
overflow: hidden;
3535
box-sizing: border-box;
3636
background: transparent;
3737

38-
&::after {
38+
&:after {
3939
content: '';
4040
width: 200%;
4141
height: 200%;
@@ -83,6 +83,7 @@
8383
color: var(--ti-mobile-search-text-color-primary);
8484
caret-color: var(--ti-mobile-search-caret-color-primary);
8585
.placeholder(@color: var(--ti-mobile-search-placeholder-text-color-primary));
86+
8687
&:focus {
8788
.placeholder(@color: var(--ti-mobile-search-placeholder-text-color-primary));
8889
}
@@ -92,6 +93,7 @@
9293
color: var(--ti-mobile-search-text-color-gray);
9394
caret-color: var(--ti-mobile-search-caret-color-gray);
9495
.placeholder(@color: var(--ti-mobile-search-placeholder-text-color-gray));
96+
9597
&:focus {
9698
.placeholder(@color: var(--ti-mobile-search-placeholder-text-color-gray));
9799
}
@@ -100,49 +102,44 @@
100102

101103
&-primary {
102104
background-color: var(--ti-mobile-search-bg-color-primary);
105+
.@{css-prefix}svg {
106+
fill: var(--ti-mobile-search-icon-fill-color-primary);
107+
}
103108
}
104109

105110
&-gray {
111+
color: var(--ti-mobile-search-text-color-gray);
106112
background-color: var(--ti-mobile-search-bg-color-gray);
113+
.@{css-prefix}svg {
114+
fill: var(--ti-mobile-search-icon-fill-color-gray);
115+
}
107116
}
108117

109118
& &__icon {
110119
text-decoration: none;
111120
display: flex;
112121

113122
.@{css-prefix}svg {
114-
fill: var(--ti-mobile-search-placeholder-text-color-primary);
123+
fill: var(--ti-mobile-search-icon-fill-color-primary);
115124
}
116125
}
117126

118127
&-gray &__icon {
119128
.@{css-prefix}svg {
120-
fill: var(--ti-mobile-search-placeholder-text-color-gray);
129+
fill: var(--ti-mobile-search-icon-fill-color-gray);
121130
}
122131
}
123132

124133
& &__close-icon {
125134
position: absolute;
126-
right: 0;
135+
right: 5px;
127136
padding: 0 8px;
128137
cursor: pointer;
129138
display: inline-flex;
130139
top: 50%;
131140
transform: translateY(-50%);
132141
}
133142

134-
&-primary {
135-
.@{css-prefix}svg {
136-
fill: var(--ti-mobile-search-icon-fill-color-primary);
137-
}
138-
}
139-
140-
&-gray {
141-
.@{css-prefix}svg {
142-
fill: var(--ti-mobile-search-icon-fill-color-gray);
143-
}
144-
}
145-
146143
&__right {
147144
display: flex;
148145
align-items: center;
@@ -152,10 +149,6 @@
152149
color: var(--ti-mobile-search-text-color-primary);
153150
}
154151

155-
&-gray {
156-
color: var(--ti-mobile-search-text-color-gray);
157-
}
158-
159152
& &__present {
160153
color: var(--ti-mobile-search-text-color-primary);
161154
font-size: var(--ti-mobile-search-font-size);

‎packages/theme-mobile/src/search/vars.less

Lines changed: 30 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,32 @@
11
:root {
2-
--ti-mobile-search-height: 44px;
3-
--ti-mobile-search-input-height: 32px;
4-
--ti-mobile-search-input-border-radius: 32px;
5-
--ti-mobile-search-input-bg-color-gray: var(--ti-mobile-common-bg-color-dark-gray, #f5f5f5);
6-
--ti-mobile-search-input-bg-color-primary: rgba(255, 255, 255, 0.15);
7-
--ti-mobile-search-font-size: 14px;
8-
--ti-mobile-search-text-color-gray: var(--ti-mobile-common-color-text-primary, #191919);
9-
--ti-mobile-search-text-color-primary: var(--ti-mobile-common-color-text-white, #fff);
10-
--ti-mobile-search-icon-fill-color-gray: #dbdbdb;
11-
--ti-mobile-search-icon-fill-color-primary: #fff;
12-
--ti-mobile-search-caret-color-primary: var(--ti-mobile-common-color-line-white, #fff);
13-
--ti-mobile-search-caret-color-gray: var(--ti-mobile-common-color-line-hightlight, #4a79fe);
14-
--ti-mobile-search-bg-color-primary: var(--ti-mobile-common-bg-color-blue-1, #3168f1);
15-
--ti-mobile-search-bg-color-gray: var(--ti-mobile-common-bg-color-white, #fff);
16-
--ti-mobile-search-placeholder-text-color-primary: var(--ti-mobile-common-color-text-placeholder-primary, #dbe5fc);
17-
--ti-mobile-search-placeholder-text-color-gray: var(--ti-mobile-common-color-text-placeholder-gray, #acacac);
2+
// 搜索框高度
3+
--ti-mobile-search-height: 56px;
4+
// 输入框高度
5+
--ti-mobile-search-input-height: 40px;
6+
// 输入文字尺寸
7+
--ti-mobile-search-font-size: var(--ti-mobile-font-size-l, 16px);
8+
// 灰色主题输入框背景色
9+
--ti-mobile-search-input-bg-color-gray: var(--ti-mobile-color-bg-default, #f5f5f5);
10+
// 常规主题输入框背景色
11+
--ti-mobile-search-input-bg-color-primary: var(--ti-mobile-color-bg-container-1, #fff);
12+
// 灰色主题文字颜色
13+
--ti-mobile-search-text-color-gray: var(--ti-mobile-color-text-primary, #191919);
14+
// 常规主题文字颜色
15+
--ti-mobile-search-text-color-primary: var(--ti-mobile-color-text-primary, #191919);
16+
// 灰色主题搜索图标填充色
17+
--ti-mobile-search-icon-fill-color-gray: var(--ti-mobile-color-icon-default, #808080);
18+
// 常规主题搜索图标填充色
19+
--ti-mobile-search-icon-fill-color-primary: var(--ti-mobile-color-icon-default, #808080);
20+
// 常规主题搜索图标填充色
21+
--ti-mobile-search-caret-color-primary: var(--ti-mobile-color-text-primary, #191919);
22+
// 灰色主题搜索图标填充色
23+
--ti-mobile-search-caret-color-gray: var(--ti-mobile-color-text-primary, #191919);
24+
// 常规主题背景色
25+
--ti-mobile-search-bg-color-primary: var(--ti-mobile-color-bg-default, #f5f5f5);
26+
// 灰色主题背景色
27+
--ti-mobile-search-bg-color-gray: var(--ti-mobile-color-bg-container-1, #fff);
28+
// 常规主题占位文字颜色
29+
--ti-mobile-search-placeholder-text-color-primary: var(--ti-mobile-color-text-placeholder, #808080);
30+
// 灰色主题占位文字颜色
31+
--ti-mobile-search-placeholder-text-color-gray: var(--ti-mobile-color-text-placeholder, #808080);
1832
}

‎packages/vue/src/search/src/mobile.vue

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@
4747
@select.stop
4848
/>
4949
<span class="tiny-mobile-search__close-icon" v-show="state.currentValue">
50-
<icon-operationfaild @click="clear" />
50+
<icon-close @click="clear" />
5151
</span>
5252
</div>
5353
<label class="tiny-mobile-search__label">
@@ -67,7 +67,7 @@
6767
<script lang="tsx">
6868
import { renderless, api } from '@opentiny/vue-renderless/search/vue'
6969
import { props, setup, defineComponent } from '@opentiny/vue-common'
70-
import { iconSearch, iconOperationfaild } from '@opentiny/vue-icon'
70+
import { iconSearch, iconClose } from '@opentiny/vue-icon'
7171
import '@opentiny/vue-theme-mobile/search/index.less'
7272
import type { ISearchApi } from '@opentiny/vue-renderless/types/search.type'
7373
@@ -84,7 +84,7 @@ export default defineComponent({
8484
],
8585
components: {
8686
IconSearch: iconSearch(),
87-
IconOperationfaild: iconOperationfaild()
87+
IconClose: iconClose()
8888
},
8989
emits: ['change', 'search', 'update:modelValue', 'clear', 'select', 'input'],
9090
setup(props, context) {

0 commit comments

Comments
 (0)