效果如下：

组件代码

<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>