uniapp搜索框
<!-- 头部搜索框 -->
<view class="Derinput">
<view class="header">
<db-search :logo="equipmentNo" @searchMsg="headerSearch" :btnShow="true" ref="search"></db-search>
</view>
</view>
data(){
return{
equipmentNo: '',
}
},
methods:{
headerSearch(value) {
console.log('value: ' + value);
this.equipmentNo = value;
this.getequipment();
},
}
<style>
.Derinput {
.header {
height: 46px;
background: #ffffff;
margin-bottom: 5px;
}
}
</style>
components----->db-search---->db-search.vue
<template>
<view class="db-search" :style="!btnShow ? 'margin-right: 38rpx;' : ''">
<!-- <image class="logo" :src="logo"></image> -->
<input
class="search-input"
:class="{ noSearchBtn: !btnShow }"
@focus="focusMsg"
@input="inputMsg"
v-model="textValue"
type="text"
placeholder="请输入设备号搜索"
placeholder-class="placeholder-class"
src="../../static/search.png"
/>
<image class="search-icon" v-show="isMaskingShow" src="../../static/search.png"></image>
<view class="search-btn" v-show="btnShow" @tap="searchMsg()">取消</view>
<view class="db-search-btn" v-show="isMaskingShow"></view>
</view>
</template>
<script>
export default {
data() {
return {
textValue: '',
};
},
methods: {
inputMsg() {
this.$emit('inputMsg', this.textValue);
this.$emit('searchMsg', this.textValue);
},
focusMsg() {
this.$emit('focusMsg');
},
searchMsg() {
uni.navigateBack({});
},
getLogo() {
let logo = this.$storage.get('search-logo');
return logo || '';
},
},
props: {
btnShow: {
type: Boolean,
default: false,
},
isMaskingShow: {
type: Boolean,
default: false,
},
logo: {
type: String,
default: `${uni.getStorageSync('logo-search')}`,
},
},
};
</script>
<style lang="scss">
.db-search {
position: relative;
display: flex;
align-items: center;
height: 80rpx;
.logo {
width: 80rpx;
height: 50rpx;
margin-left: 38rpx;
}
.search-icon {
position: absolute;
right: 50rpx;
width: 32rpx;
height: 32rpx;
}
.placeholder-class {
padding-left: 0px;
}
.search-input {
flex: 1;
margin-left: 38rpx;
padding-top: 8rpx;
padding-bottom: 8rpx;
padding-left: 15px;
background-color: #f8f8f8;
border-radius: 8rpx;
border-radius: 30rpx;
&.noSearchBtn {
border-radius: 30rpx;
}
}
.search-btn {
font-size: 28rpx;
width: 100rpx;
text-align: center;
}
.db-search-btn {
position: absolute;
left: 100rpx;
top: 0;
right: 0;
bottom: 0;
background-color: unset;
z-index: 22;
}
}
.placeholder-class {
color: #999;
font-size: 28rpx;
padding-left: 20rpx;
}
</style>