结构:
<template>
<div>
<!-- 搜索页面头部 -->
<div class="search-header">
<!-- 后退按钮 -->
<van-icon name="arrow-left" color="white" size="0.48rem" class="goback" @click="$router.back()" />
<!-- 搜索组件 -->
<van-search placeholder="请输入搜索关键词" background="#007BFF" shape="round" v-xixi v-model.trim="keyword"
@input="inputFn" />
</div>
</div>
</template>
js:
<script>
export default {
data () {
return {
keyword: '', // 搜索关键字
timer: null // 防抖
}
},
methods: {
// 搜索框
inputFn () {
clearInterval(this.timer)
this.timer = setTimeout(() => {
if (this.keyword.length === 0) return // 判断空
console.log(this.keyword)
}, 1000)
}
}
}
</script>
样式:
<style scoped lang="less">
.search-header {
height: 46px;
display: flex;
align-items: center;
background-color: #007bff;
overflow: hidden;
/*后退按钮*/
.goback {
padding-left: 14px;
}
/*搜索组件*/
.van-search {
flex: 1;
}
}
</style>
你负责抄我的,我负责抄别人的,合作愉快!!!