Browse Source

发起报价搜索框优化

master
Enzo 5 years ago
parent
commit
bf95b758e7
  1. 25
      supplier/pages/offer/index.vue

25
supplier/pages/offer/index.vue

@ -45,7 +45,11 @@
<view class="box">
<view class="lf-m-b-20 lf-row-between">
<view class="lf-font-32 lf-color-black lf-font-bold">报价明细</view>
<input placeholder="搜索物资" confirm-type="search" :value="searchValue" @input="inputChange" @confirm="inputConfirm" style="background: pink;" />
<view class="flex lf-row-between">
<u-icon name="search" style="position: relative;left: 50rpx;" v-if="show_icon"></u-icon>
<input placeholder="搜索物资" confirm-type="search" @focus="hideIcon()" class="search-self" :value="searchValue" @input="inputChange" @confirm="inputConfirm" />
</view>
</view>
<wyb-table :first-line-fixed="true"
contentBgColor="#eef6fe"
@ -78,6 +82,7 @@
},
data(){
return {
show_icon: true,
headers: [{
label: '物资名称',
key: 'name',
@ -173,6 +178,11 @@
}
},
methods: {
hideIcon() {
if(this.searchValue != '') {
this.show_icon = false;
}
},
// input
inputChange(event){
if(timer){
@ -182,6 +192,10 @@
timer = setTimeout(() => {
this.searchValue = event.detail.value;
}, 1000);
this.show_icon = false;
if(event.detail.value == '') {
this.show_icon = true;
}
},
//
inputConfirm(event){
@ -455,6 +469,15 @@
}
</style>
<style lang="scss" scoped="scoped">
.search-self {
background: rgb(228,228,228);
padding: 10rpx 0 10rpx 20rpx;
border-radius: 40rpx;
}
.search-self .uni-input-placeholder {
margin-left: 40rpx;
color: #333;
}
.lf-m-t-5{
margin-top: 5rpx;
}

Loading…
Cancel
Save