You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
101 lines
2.0 KiB
101 lines
2.0 KiB
<template>
|
|
<view class="input-group flex-1">
|
|
<input :placeholder="placeholder" @input="search" @blur="hideList" v-model="backName" />
|
|
<view class="ul">
|
|
<view class="li" v-for="(item, index) in dataSource" :key="index" @tap="select(item)">{{ item.name }}</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
placeholder: String, //默认提示
|
|
searchKey: String, //模糊搜索的key值
|
|
dataSource: {
|
|
type: Array,
|
|
default: function () {
|
|
//数据源
|
|
return [];
|
|
},
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
list: [],
|
|
name: '',
|
|
backName: '',
|
|
};
|
|
},
|
|
destroyed() {
|
|
clearTimeout(this.t);
|
|
},
|
|
methods: {
|
|
search(e) {
|
|
let val = e.detail.value;
|
|
console.log('val: ', val);
|
|
this.$emit('searchPrevTask', val);
|
|
|
|
// let arr = [];
|
|
// for (let i = 0; i < dataSource.length; i++) {
|
|
// if (dataSource[i].name.indexOf(val) !== -1) {
|
|
// arr.push(dataSource[i]);
|
|
// }
|
|
// }
|
|
// if (!val) {
|
|
// this.list = [];
|
|
// } else {
|
|
// this.list = arr;
|
|
// }
|
|
},
|
|
|
|
select(item) {
|
|
console.log('item: ', item);
|
|
this.backName = item.name;
|
|
this.$emit('select', item);
|
|
},
|
|
|
|
hideList() {
|
|
setTimeout(() => {
|
|
this.$emit('clearAllTasks');
|
|
}, 200);
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.input-group {
|
|
position: relative;
|
|
|
|
input {
|
|
border-bottom: 1upx solid #dcdfe6;
|
|
height: 90upx;
|
|
padding-left: 10upx;
|
|
font-size: 30upx;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.uni-input-placeholder {
|
|
color: rgb(192, 196, 204);
|
|
font-size: 28upx;
|
|
}
|
|
|
|
.ul {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 100%;
|
|
width: 100%;
|
|
z-index: 999;
|
|
background: #fff;
|
|
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
|
|
max-height: 100px;
|
|
overflow-y: auto;
|
|
|
|
.li {
|
|
border-bottom: 1upx solid #f1f1f1;
|
|
padding: 16upx;
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|