87 lines
1.6 KiB
Vue
87 lines
1.6 KiB
Vue
<template>
|
|
<view class="component">
|
|
<view class="layout-search flex justify-between align-center">
|
|
<u-icon name="arrow-left" color="#ffffff" size="22" @click="handBack" v-if="showBack"></u-icon>
|
|
<view class="search-box flex justify-between align-center">
|
|
<u-icon name="search" size="24"></u-icon>
|
|
<input class="flex-1 search-input" type="text" :placeholder="placeholder" v-model="keyword" @input="search"/>
|
|
<view class="search-btn" @click="search">搜索</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
k: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
placeholder: {
|
|
type: String,
|
|
default: '请输入关键词',
|
|
},
|
|
showBack: {
|
|
type: Boolean,
|
|
default: true
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
keyword: ''
|
|
};
|
|
},
|
|
methods: {
|
|
handBack() {
|
|
uni.navigateBack()
|
|
},
|
|
search() {
|
|
this.$emit('search', this.keyword)
|
|
}
|
|
},
|
|
watch: {
|
|
k: {
|
|
deep: true,
|
|
handler(val) {
|
|
console.log(val)
|
|
this.keyword = val
|
|
}
|
|
}
|
|
},
|
|
mounted() {
|
|
this.keyword = this.k
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.layout-search {
|
|
// width: 690rpx;
|
|
height: 80rpx;
|
|
padding: 0 30rpx;
|
|
background: #ae4f4d;
|
|
}
|
|
|
|
.search-box {
|
|
width: 560rpx;
|
|
height: 56rpx;
|
|
padding: 0 20rpx;
|
|
background: #ffffff;
|
|
border-radius: 10rpx;
|
|
|
|
.search-input {
|
|
padding: 4rpx 10rpx;
|
|
font-size: 24rpx;
|
|
line-height: 36rpx;
|
|
color: #333333;
|
|
}
|
|
|
|
.search-btn {
|
|
font-size: 24rpx;
|
|
line-height: 36rpx;
|
|
color: #A92924;
|
|
}
|
|
}
|
|
</style>
|