Hooke / tswj

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
7a44164c 1 parent e647de94

fix 搜索栏新增清空按钮

Inline Side-by-side
Showing 2 changed files with 91 additions and 4 deletions
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
2 * @Author: hookehuyr hookehuyr@gmail.com 2 * @Author: hookehuyr hookehuyr@gmail.com
3 * @Date: 2022-05-30 13:51:47 3 * @Date: 2022-05-30 13:51:47
4 * @LastEditors: hookehuyr hookehuyr@gmail.com 4 * @LastEditors: hookehuyr hookehuyr@gmail.com
5 - * @LastEditTime: 2024-12-03 15:13:35 5 + * @LastEditTime: 2024-12-03 15:50:33
6 * @FilePath: /tswj/src/views/client/rankList.vue 6 * @FilePath: /tswj/src/views/client/rankList.vue
7 * @Description: 幼儿园儿童捐赠金额排行榜 7 * @Description: 幼儿园儿童捐赠金额排行榜
8 --> 8 -->
...@@ -34,7 +34,10 @@ ...@@ -34,7 +34,10 @@
34 34
35 <div style="background-color: #F7F7F7; height: auto; padding: 1rem; padding-top: 0;"> 35 <div style="background-color: #F7F7F7; height: auto; padding: 1rem; padding-top: 0;">
36 <div style="background-color: #FFF; border-radius: 1rem; padding: 0.5rem 1rem; display: flex; align-items: center; justify-content: space-between;"> 36 <div style="background-color: #FFF; border-radius: 1rem; padding: 0.5rem 1rem; display: flex; align-items: center; justify-content: space-between;">
37 - <input type="text" v-model="perf_name" placeholder="请输入要搜索的表演者姓名" @blur="onSearch" style="border: 0; width: 100%;"> 37 + <div class="input-wrapper">
38 + <input type="text" v-model="perf_name" placeholder="请输入要搜索的表演者姓名" @blur="onSearch" style="border: 0; width: 100%;">
39 + <span v-if="perf_name" class="clear-icon" @click="clearInput"></span>
40 + </div>
38 <van-icon name="search" /> 41 <van-icon name="search" />
39 </div> 42 </div>
40 </div> 43 </div>
...@@ -133,6 +136,14 @@ const onSearch = () => { ...@@ -133,6 +136,14 @@ const onSearch = () => {
133 finished.value = false; 136 finished.value = false;
134 onLoad() 137 onLoad()
135 } 138 }
139 +
140 +const clearInput = () => {
141 + perf_name.value = '';
142 + offset.value = 0;
143 + donateRankList.value = [];
144 + finished.value = false;
145 + onLoad()
146 +};
136 </script> 147 </script>
137 148
138 <style lang="less" scoped> 149 <style lang="less" scoped>
...@@ -194,4 +205,36 @@ const onSearch = () => { ...@@ -194,4 +205,36 @@ const onSearch = () => {
194 text-align: center; 205 text-align: center;
195 color: #84909F; 206 color: #84909F;
196 } 207 }
208 +input {
209 + padding-right: 24px; /* 给右侧清除按钮留空间 */
210 +}
211 +.input-wrapper {
212 + position: relative;
213 + display: inline-flex;
214 + align-items: center;
215 + width: 100%;
216 +}
217 +.clear-icon {
218 + position: absolute;
219 + right: 8px;
220 + top: 50%;
221 + transform: translateY(-50%);
222 + width: 16px;
223 + height: 16px;
224 + background: #ddd;
225 + border-radius: 50%;
226 + cursor: pointer;
227 +}
228 +.clear-icon::before {
229 + content: '×';
230 + position: absolute;
231 + top: 50%;
232 + left: 50%;
233 + transform: translate(-50%, -50%);
234 + font-size: 12px;
235 + color: white;
236 +}
237 +.clear-icon:hover {
238 + background: #bbb;
239 +}
197 </style> 240 </style>
......
1 <!-- 1 <!--
2 * @Date: 2024-12-03 10:35:15 2 * @Date: 2024-12-03 10:35:15
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2024-12-03 15:15:45 4 + * @LastEditTime: 2024-12-03 15:49:14
5 * @FilePath: /tswj/src/views/client/searchPage.vue 5 * @FilePath: /tswj/src/views/client/searchPage.vue
6 * @Description: 文件描述 6 * @Description: 文件描述
7 --> 7 -->
...@@ -9,7 +9,10 @@ ...@@ -9,7 +9,10 @@
9 <div class="search-page"> 9 <div class="search-page">
10 <div style="background-color: #F7F7F7; height: auto; padding: 1rem;"> 10 <div style="background-color: #F7F7F7; height: auto; padding: 1rem;">
11 <div style="background-color: #FFF; border-radius: 1rem; padding: 0.5rem 1rem; display: flex; align-items: center; justify-content: space-between;"> 11 <div style="background-color: #FFF; border-radius: 1rem; padding: 0.5rem 1rem; display: flex; align-items: center; justify-content: space-between;">
12 - <input type="text" v-model="performer_name" placeholder="请输入要搜索的表演者姓名" @blur="onSearch" style="border: 0; width: 100%;"> 12 + <div class="input-wrapper">
13 + <input type="text" v-model="performer_name" placeholder="请输入要搜索的表演者姓名" @blur="onSearch" style="border: 0; width: 100%;">
14 + <span v-if="performer_name" class="clear-icon" @click="clearInput"></span>
15 + </div>
13 <van-icon name="search" /> 16 <van-icon name="search" />
14 </div> 17 </div>
15 </div> 18 </div>
...@@ -131,6 +134,14 @@ const onSearch = async() => { ...@@ -131,6 +134,14 @@ const onSearch = async() => {
131 onLoad() 134 onLoad()
132 } 135 }
133 136
137 +const clearInput = () => {
138 + performer_name.value = "";
139 + offset.value = 0
140 + search_prod_list.value = []
141 + loading.value = true;
142 + finished.value = false;
143 +};
144 +
134 </script> 145 </script>
135 146
136 <style lang="less" scoped> 147 <style lang="less" scoped>
...@@ -157,4 +168,37 @@ const onSearch = async() => { ...@@ -157,4 +168,37 @@ const onSearch = async() => {
157 box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.06); 168 box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.06);
158 } 169 }
159 } 170 }
171 +
172 +input {
173 + padding-right: 24px; /* 给右侧清除按钮留空间 */
174 +}
175 +.input-wrapper {
176 + position: relative;
177 + display: inline-flex;
178 + align-items: center;
179 + width: 100%;
180 +}
181 +.clear-icon {
182 + position: absolute;
183 + right: 8px;
184 + top: 50%;
185 + transform: translateY(-50%);
186 + width: 16px;
187 + height: 16px;
188 + background: #ddd;
189 + border-radius: 50%;
190 + cursor: pointer;
191 +}
192 +.clear-icon::before {
193 + content: '×';
194 + position: absolute;
195 + top: 50%;
196 + left: 50%;
197 + transform: translate(-50%, -50%);
198 + font-size: 12px;
199 + color: white;
200 +}
201 +.clear-icon:hover {
202 + background: #bbb;
203 +}
160 </style> 204 </style>
......