Hooke / jgdl

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
6d944150 1 parent 4937f9c4

feat(搜索框): 为搜索框添加blur事件处理并调整样式 

为多个页面的搜索框添加blur事件处理函数，输出搜索值
调整搜索框输入文字的样式和间距
Inline Side-by-side
Showing 6 changed files with 28 additions and 12 deletions
1 <!-- 1 <!--
2 * @Date: 2022-09-19 14:11:06 2 * @Date: 2022-09-19 14:11:06
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2025-07-02 22:49:42 4 + * @LastEditTime: 2025-07-03 21:10:36
5 * @FilePath: /jgdl/src/pages/goodCarList/index.vue 5 * @FilePath: /jgdl/src/pages/goodCarList/index.vue
6 * @Description: 特价好车页面 6 * @Description: 特价好车页面
7 --> 7 -->
...@@ -17,8 +17,7 @@ ...@@ -17,8 +17,7 @@
17 </nut-col> 17 </nut-col>
18 <nut-col span="18"> 18 <nut-col span="18">
19 <!-- Search Bar --> 19 <!-- Search Bar -->
20 - <nut-searchbar v-model="searchValue" placeholder="搜索品牌型号" shape="round" 20 + <nut-searchbar v-model="searchValue" placeholder="搜索品牌型号" @blur="onBlurSearch" shape="round" background="transparent" input-background="#ffffff">
21 - background="transparent" input-background="#ffffff">
22 <template #leftin> 21 <template #leftin>
23 <Search2 /> 22 <Search2 />
24 </template> 23 </template>
...@@ -131,6 +130,9 @@ import './index.less' ...@@ -131,6 +130,9 @@ import './index.less'
131 130
132 // 响应式数据 131 // 响应式数据
133 const searchValue = ref('') 132 const searchValue = ref('')
133 +const onBlurSearch = () => {
134 + console.warn(searchValue.value)
135 +}
134 const favoriteIds = ref(['2', '4', '6']) 136 const favoriteIds = ref(['2', '4', '6'])
135 137
136 // Filter states - 使用NutUI Menu组件 138 // Filter states - 使用NutUI Menu组件
......
...@@ -15,6 +15,11 @@ ...@@ -15,6 +15,11 @@
15 margin-right: 15rpx; 15 margin-right: 15rpx;
16 } 16 }
17 17
18 +.nut-searchbar__search-input .nut-searchbar__input-inner .h5-input {
19 + padding-top: 10rpx;
20 + color: gray;
21 +}
22 +
18 /* 网格布局修复 */ 23 /* 网格布局修复 */
19 .grid { 24 .grid {
20 display: grid; 25 display: grid;
......
1 <!-- 1 <!--
2 * @Date: 2025-06-28 10:33:00 2 * @Date: 2025-06-28 10:33:00
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2025-07-03 21:01:21 4 + * @LastEditTime: 2025-07-03 21:09:43
5 * @FilePath: /jgdl/src/pages/index/index.vue 5 * @FilePath: /jgdl/src/pages/index/index.vue
6 * @Description: 捡个电驴首页 6 * @Description: 捡个电驴首页
7 --> 7 -->
...@@ -16,8 +16,7 @@ ...@@ -16,8 +16,7 @@
16 </nut-col> 16 </nut-col>
17 <nut-col span="18"> 17 <nut-col span="18">
18 <!-- Search Bar --> 18 <!-- Search Bar -->
19 - <nut-searchbar v-model="searchValue" placeholder="搜索品牌型号" shape="round" background="transparent" 19 + <nut-searchbar v-model="searchValue" placeholder="搜索品牌型号" @blur="onBlurSearch" shape="round" background="transparent" input-background="#ffffff">
20 - input-background="#ffffff">
21 <template #leftin> 20 <template #leftin>
22 <Search2 /> 21 <Search2 />
23 </template> 22 </template>
...@@ -170,6 +169,10 @@ import "./index.less"; ...@@ -170,6 +169,10 @@ import "./index.less";
170 const searchValue = ref('') 169 const searchValue = ref('')
171 const favoriteIds = ref([]) 170 const favoriteIds = ref([])
172 171
172 +const onBlurSearch = () => {
173 + console.warn(searchValue.value)
174 +}
175 +
173 // Banner图片 176 // Banner图片
174 const bannerImages = ref([ 177 const bannerImages = ref([
175 'https://images.unsplash.com/photo-1558981806-ec527fa84c39?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60', 178 'https://images.unsplash.com/photo-1558981806-ec527fa84c39?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60',
......
...@@ -9,8 +9,7 @@ ...@@ -9,8 +9,7 @@
9 </nut-col> 9 </nut-col>
10 <nut-col span="20"> 10 <nut-col span="20">
11 <!-- Search Bar --> 11 <!-- Search Bar -->
12 - <nut-searchbar v-model="searchValue" placeholder="搜索消息" shape="round" 12 + <nut-searchbar v-model="searchValue" placeholder="搜索消息" @blur="onBlurSearch" shape="round" background="transparent" input-background="#ffffff">
13 - background="transparent" input-background="#ffffff">
14 <template #leftin> 13 <template #leftin>
15 <Search2 /> 14 <Search2 />
16 </template> 15 </template>
...@@ -229,6 +228,9 @@ const scrollStyle = ref({ ...@@ -229,6 +228,9 @@ const scrollStyle = ref({
229 228
230 // 搜索值 229 // 搜索值
231 const searchValue = ref('') 230 const searchValue = ref('')
231 +const onBlurSearch = () => {
232 + console.warn(searchValue.value)
233 +}
232 // 当前激活的Tab 234 // 当前激活的Tab
233 const activeTab = ref('all') 235 const activeTab = ref('all')
234 // 加载状态 236 // 加载状态
......
...@@ -17,8 +17,7 @@ ...@@ -17,8 +17,7 @@
17 </nut-col> 17 </nut-col>
18 <nut-col span="18"> 18 <nut-col span="18">
19 <!-- Search Bar --> 19 <!-- Search Bar -->
20 - <nut-searchbar v-model="searchValue" placeholder="搜索品牌型号" shape="round" 20 + <nut-searchbar v-model="searchValue" placeholder="搜索品牌型号" @blur="onBlurSearch" shape="round" background="transparent" input-background="#ffffff">
21 - background="transparent" input-background="#ffffff">
22 <template #leftin> 21 <template #leftin>
23 <Search2 /> 22 <Search2 />
24 </template> 23 </template>
...@@ -120,6 +119,9 @@ import './index.less' ...@@ -120,6 +119,9 @@ import './index.less'
120 119
121 // 响应式数据 120 // 响应式数据
122 const searchValue = ref('') 121 const searchValue = ref('')
122 +const onBlurSearch = () => {
123 + console.warn(searchValue.value)
124 +}
123 const favoriteIds = ref(['2', '4', '6']) 125 const favoriteIds = ref(['2', '4', '6'])
124 126
125 // Filter states - 使用NutUI Menu组件 127 // Filter states - 使用NutUI Menu组件
......
...@@ -10,8 +10,7 @@ ...@@ -10,8 +10,7 @@
10 </nut-col> 10 </nut-col>
11 <nut-col span="18"> 11 <nut-col span="18">
12 <!-- Search Bar --> 12 <!-- Search Bar -->
13 - <nut-searchbar v-model="searchValue" placeholder="搜索品牌型号" shape="round" 13 + <nut-searchbar v-model="searchValue" placeholder="搜索品牌型号" @blur="onBlurSearch" shape="round" background="transparent" input-background="#ffffff">
14 - background="transparent" input-background="#ffffff">
15 <template #leftin> 14 <template #leftin>
16 <Search2 /> 15 <Search2 />
17 </template> 16 </template>
...@@ -137,6 +136,9 @@ import TabBar from '@/components/TabBar.vue' ...@@ -137,6 +136,9 @@ import TabBar from '@/components/TabBar.vue'
137 136
138 // 响应式数据 137 // 响应式数据
139 const searchValue = ref('') 138 const searchValue = ref('')
139 +const onBlurSearch = () => {
140 + console.warn(searchValue.value)
141 +}
140 const favoriteIds = ref(['5', '7', '1']) 142 const favoriteIds = ref(['5', '7', '1'])
141 143
142 // 无限滚动相关状态 144 // 无限滚动相关状态
......