<template>
<view>
<view style="position: sticky;top: 0;z-index: 99999;margin-top: 80px;">
<view class="u-search-box">
<u-search placeholder="请输入员工姓名" bgColor='#eeeeee' height=30 v-model="keyWord" @clickIcon="search" @search="search()" @clear="clear" @custom="search" @blur="blur"></u-search>
</view>
</view>
<view>{{show}}</view>
<view v-show="show">
<view v-for="p in persons">
{{p.name}} - {{p.age}}
</view>
</view>
<view v-show="!show">
<view v-for="p in filPerons">
{{p.name}} - {{p.age}}
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
keyWord:'',
show:true,
persons:[
{id:'001',name:'马冬梅',age:19,sex:'女'},
{id:'002',name:'周冬雨',age:20,sex:'女'},
{id:'003',name:'周杰伦',age:21,sex:'男'},
{id:'004',name:'温兆伦',age:22,sex:'男'},
{id:'005',name:'温兆',age:22,sex:'男'}
],
filPerons:[]
}
},
// watch:{
// keyWord:{
// immediate:true,
// handler(val){
// this.filPerons = this.persons.filter((p)=>{
// return p.name.indexOf(val) !== -1
// })
// }
// }
// },
methods: {
search(){
if (this.keyWord === "") {
console.log(111)
uni.showToast({
title: "请先输入搜索关键字",
icon: "none"
})
} else {
console.log(222)
this.show = false
console.log(this.show)
this.filPerons = this.persons.filter((p)=>{
return p.name.indexOf(this.keyWord) !== -1
})
console.log(this.filPerons)
}
},
onload() {
},
clear(){
this.show = true
},
blur(){
this.show = true
}
}
}
</script>
<style>
</style>