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
<!--
* @Date: 2022-09-19 14:11:06
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-07-02 22:49:42
* @LastEditTime: 2025-07-03 21:10:36
* @FilePath: /jgdl/src/pages/goodCarList/index.vue
* @Description: 特价好车页面
-->
......@@ -17,8 +17,7 @@
</nut-col>
<nut-col span="18">
<!-- Search Bar -->
<nut-searchbar v-model="searchValue" placeholder="搜索品牌型号" shape="round"
background="transparent" input-background="#ffffff">
<nut-searchbar v-model="searchValue" placeholder="搜索品牌型号" @blur="onBlurSearch" shape="round" background="transparent" input-background="#ffffff">
<template #leftin>
<Search2 />
</template>
......@@ -131,6 +130,9 @@ import './index.less'
// 响应式数据
const searchValue = ref('')
const onBlurSearch = () => {
console.warn(searchValue.value)
}
const favoriteIds = ref(['2', '4', '6'])
// Filter states - 使用NutUI Menu组件
......
......@@ -15,6 +15,11 @@
margin-right: 15rpx;
}
.nut-searchbar__search-input .nut-searchbar__input-inner .h5-input {
padding-top: 10rpx;
color: gray;
}
/* 网格布局修复 */
.grid {
display: grid;
......
<!--
* @Date: 2025-06-28 10:33:00
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-07-03 21:01:21
* @LastEditTime: 2025-07-03 21:09:43
* @FilePath: /jgdl/src/pages/index/index.vue
* @Description: 捡个电驴首页
-->
......@@ -16,8 +16,7 @@
</nut-col>
<nut-col span="18">
<!-- Search Bar -->
<nut-searchbar v-model="searchValue" placeholder="搜索品牌型号" shape="round" background="transparent"
input-background="#ffffff">
<nut-searchbar v-model="searchValue" placeholder="搜索品牌型号" @blur="onBlurSearch" shape="round" background="transparent" input-background="#ffffff">
<template #leftin>
<Search2 />
</template>
......@@ -170,6 +169,10 @@ import "./index.less";
const searchValue = ref('')
const favoriteIds = ref([])
const onBlurSearch = () => {
console.warn(searchValue.value)
}
// Banner图片
const bannerImages = ref([
'https://images.unsplash.com/photo-1558981806-ec527fa84c39?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60',
......
......@@ -9,8 +9,7 @@
</nut-col>
<nut-col span="20">
<!-- Search Bar -->
<nut-searchbar v-model="searchValue" placeholder="搜索消息" shape="round"
background="transparent" input-background="#ffffff">
<nut-searchbar v-model="searchValue" placeholder="搜索消息" @blur="onBlurSearch" shape="round" background="transparent" input-background="#ffffff">
<template #leftin>
<Search2 />
</template>
......@@ -229,6 +228,9 @@ const scrollStyle = ref({
// 搜索值
const searchValue = ref('')
const onBlurSearch = () => {
console.warn(searchValue.value)
}
// 当前激活的Tab
const activeTab = ref('all')
// 加载状态
......
......@@ -17,8 +17,7 @@
</nut-col>
<nut-col span="18">
<!-- Search Bar -->
<nut-searchbar v-model="searchValue" placeholder="搜索品牌型号" shape="round"
background="transparent" input-background="#ffffff">
<nut-searchbar v-model="searchValue" placeholder="搜索品牌型号" @blur="onBlurSearch" shape="round" background="transparent" input-background="#ffffff">
<template #leftin>
<Search2 />
</template>
......@@ -120,6 +119,9 @@ import './index.less'
// 响应式数据
const searchValue = ref('')
const onBlurSearch = () => {
console.warn(searchValue.value)
}
const favoriteIds = ref(['2', '4', '6'])
// Filter states - 使用NutUI Menu组件
......
......@@ -10,8 +10,7 @@
</nut-col>
<nut-col span="18">
<!-- Search Bar -->
<nut-searchbar v-model="searchValue" placeholder="搜索品牌型号" shape="round"
background="transparent" input-background="#ffffff">
<nut-searchbar v-model="searchValue" placeholder="搜索品牌型号" @blur="onBlurSearch" shape="round" background="transparent" input-background="#ffffff">
<template #leftin>
<Search2 />
</template>
......@@ -137,6 +136,9 @@ import TabBar from '@/components/TabBar.vue'
// 响应式数据
const searchValue = ref('')
const onBlurSearch = () => {
console.warn(searchValue.value)
}
const favoriteIds = ref(['5', '7', '1'])
// 无限滚动相关状态
......