效果如下:
组件代码
<template>
<div class="search-input flex flex-space-between flex-center-cz">
<input type="text" v-model="value" :ref="inpuName" :placeholder="placeholder" @keyup.enter="searchClick"/>
<img class="pointer" src="@/assets/images/find-blue.png" @click="searchClick">
</div>
</template>
<script>
export default {
name:'SearchInput',
props:{
placeholder:{},
name:{},
focus:{}
},
created(){
this.inpuName = this.name
},
mounted() {
if (this.focus == 'focus') {
this.$nextTick(() => {
this.$refs[this.inpuName].focus();
})
}
},
data() {
return {
value:''
}
},
methods:{
searchClick() {
this.$emit("search", this.value);
},
}
}
</script>
<style scoped>
.search-input {
box-sizing: border-box;
border-radius: 5px;
padding-left: 8px;
padding-right: 8px;
height: 28px;
background: rgba(255,255,255,0.2);
box-shadow: 0px 4px 9px 0px rgba(0,81,139,0.16);
border-radius: 12px;
}
.search-input input {
border: 0;
width: 100%;
background: transparent;
}
.search-input img {
width: 12px;
height: 12px;
}
</style>
调用代码
<SearchInput :placeholder="'请输入文档名或内容查询'" style="width: 300px;" @search="search"></SearchInput>