vue手写组件实现自定义远程搜索框，可以展示图片
.container{position:absolute;.selectLIst{位置：相对；z-索引：10；背景色：#FFFFFF；框阴影：04px3px#C5C5C5；最大高度：200px；溢出：自动；.item{高度：30px；-内容：居中；}.item:hover{背景颜色：#EFEFEF;}}ul{list-style:none//隐藏无序列表前面的小圆点}}背景在实际开发vue项目中，一般是配合element-ui使用，往往可以满足大部分需求。但是有时候element-ui不能满足某些要求。比如现在我们有这样一个场景：远程搜索框的下拉列表项不仅可以显示文字内容，还可以显示搜索内容的图片。首先我们看一下官网这个组件（el-autocomplete）的功能，如下图，这是element-ui官网为我们提供的远程搜索组件，它可以进行搜索当我们输入的时候根据输入的内容实时从远程服务器获取内容并显示在下拉框中。Element-ui列表中对应的内容显然是搜索到的内容的value字段，是一个字符串，不能满足我们放图片的需求。这时候我们就需要封装一个自定义的可以显示图片的远程搜索框。实现原理其实很简单。主要有几点：监听文本框的输入事件，加上防抖（性能优化，停止输入一段时间后可以调用接口获取内容）使用v-forlistrendering获取的内容项放置在输入框下方，为列表设置最大高度（否则高度会根据搜索到的内容数量无限向下扩展），超过这个高度加一个滚动条（max-heightandoverflow:auto)点击其他区域或列表框在选中某项时隐藏其他样式：为每个项目添加边框，使其与相邻的项目隔离；在列表框底部添加阴影效果；每个项目的颜色在鼠标移入时变灰，鼠标移出时恢复最终效果如图：代码如下：//封装了一个远程获取搜索内容的输入框server，比autocompleteuole功能更多，可以显示列表中的图片"obj[name]"@input="onInput"@blur="isShow=false"clearablestyle="width:200px">{{item.value}}//文本内容//图片
<script>exportdefault{name:'RemoteSearch',props:{obj:{type:Object},name:{type:String},},data(){return{timer:null,//它不是真正有用的放在外面安全且容易被篡改resultList:[],//最后要渲染的内容数组isShow:false//控制下拉列表的显示和隐藏}},methods:{onInput(){this.isShow=true//防抖if(this.timer){clearTimeout(this.timer)}this.timer=setTimeout(()=>{this.fetchContent()},800)},asyncfetchContent(){this.resultList=[]letqueryObj={type:1}//判断queryString是数字还是单词if(!isNaN(Number(this.obj[this.name]))){queryObj.id=this.obj[this.name]}else{queryObj.word=this.obj[this.name]}//在这里写你要请求的地址constresult=awaitthis.$ajax.post(`/admin/incentive/queryRewardDetail`,queryObj)if(result.data.data){constres=result.data.datares.forEach(e=&g吨;{//这里从返回的结果中选择需要的内容放入resultListthis.resultList.push({value:e.id+''+e.word,picUrl:e.wordPic,id:e.id})});}else{this.$message.warning("请求错误！");}},handleSelect(item){this.obj[this.name]=item.id+''//给相应的字段赋值this.isShow=false//选择项目后隐藏下拉列表框}}}
.container{position:absolute;.selectLIst{位置：相对；z-索引：10；背景色：#FFFFFF；框阴影：04px3px#C5C5C5；最大高度：200px；溢出：自动；.item{高度：30px；-内容：居中；}.item:hover{背景颜色：#EFEFEF;}}ul{list-style:none//隐藏无序列表前面的小圆点}}直接在需要的页面导入并使用：//item:{word:''}//如果你想把输入框绑定到item的word属性，那么
