<template>
<vui-input
v-model="keyword"
:placeholder="placeholder"
v-bind="$attrs"
class="search"
clearable
@input="debounceSearch"
>
<i slot="prefix" class="el-input__icon search-icon" @click="goSearch"></i>
</vui-input>
</template>
<script>
import {debounce} from '@/utils/common'
export default {
name: 'Search',
props: {
placeholder: {
type: String,
default: '筛选工程名称',
},
},
data() {
return {
keyword: '',
}
},
methods: {
goSearch() {
this.$emit('on-search', this.keyword)
},
debounceSearch: debounce(function() {
this.goSearch()
}),
},
}
</script>
<style lang="less">
.search {
180px;
z-index: 10;
border-radius: 20px !important;
.search-icon {
cursor: pointer;
display: inline-block;
18px;
margin-left: 5px;
background: url('https://deepexi.oss-cn-shenzhen.aliyuncs.com/deepexi-services/common/search.svg')
center / contain no-repeat;
background-size: 16px auto;
}
.el-input__inner {
border: 1px solid #cad1e8;
}
input {
border-radius: 16px !important;
}
}
</style>