58 lines
994 B
Vue
58 lines
994 B
Vue
<script>
|
|
export default {
|
|
name: "HeaderSearch",
|
|
data() {
|
|
return {
|
|
keyword: ''
|
|
}
|
|
},
|
|
methods: {
|
|
goSearch() {
|
|
console.log('跳转')
|
|
this.$u.route({
|
|
url: '/pages/search/search',
|
|
params: {
|
|
keyword: this.keyword
|
|
}
|
|
})
|
|
},
|
|
onClickIcon() {
|
|
console.log('点击了扫码图标')
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<view class="header-search">
|
|
<view class="left-search">
|
|
<up-search searchIcon="scan"
|
|
class="search"
|
|
placeholder="输入你想查询的服务"
|
|
v-model="keyword"
|
|
:showAction="false"
|
|
@focus="goSearch"
|
|
@clickIcon="onClickIcon"
|
|
></up-search>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.header-search {
|
|
width: 100%;
|
|
padding: 29rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.left-search {
|
|
width: 100%;
|
|
}
|
|
|
|
.search {
|
|
//width: 400rpx;
|
|
}
|
|
</style>
|