html显示远程图片,Vue 手写组件之实现一个可显示图片的自定义远程搜索框

在实际的vue项目开发中，一般与element-ui搭配使用的比较多。

如下图，这个是element-ui官网为我们提供的远程搜索组件，它能够在我们输入时，根据输入内容实时从远程服务器获取内容并显示在下拉框中。

现在问题来了，我们有这样一个需求：下拉列表中不仅仅能展示文字内容，也要显示相应的文字说明图片

Element-ui列表中对应的内容显然 是搜索到的内容的value字段，是一个字符串，是无法满足我们放入图片的需求的。

这时就需要我们自己去封装一个自定义的能显示图片的远程搜索框了。

原理其实很简单：监听文本框的输入事件，并且为其添加防抖(性能上的优化，使得停止输入一段时间后再去调用搜索函数)

将搜索到的内容放入一个无序列表中，在输入框下方显示

为列表设置最大高度(否则将根据搜索到的内容个数无限向下延长)，超过这个高度则加滚动条

点击其他区域或者选中某一项时列表框隐藏

样式，每项加边框，下面加阴影，每项鼠标移动进入时颜色置灰，移除时恢复

最终实现效果如图：

代码如下：// 封了一个从服务器远程获取搜索内容的输入框，比autocompleteuole多了在列表中显示图片的功能

placeholder="输入单词或ID"

v-model="obj[name]"

@input="whileInput"

@blur="isShow=false"

clearable

style="width: 200px"

>

{{item.value}}


export default {

name: 'RemoteSearch',

props: {

obj: {

type: Object

},

name: {

type: String

},

},

data() {

return {

timer: null, // 这里放外面其实不安全，容易被篡改

cardResult: [],

isShow: false

}

},

methods: {

whileInput() {

this.isShow = true

// 防抖

if(this.timer) {

clearTimeout(this.timer)

}

this.timer = setTimeout(()=>{

this.fetchContent()

},800)

},

async fetchContent() {

this.cardResult = []

let queryObj = {type:1}

// 判断 queryString是数字还是单词

if(!isNaN(Number(this.obj[this.name]))) {

queryObj.id = this.obj[this.name]

} else {

queryObj.word = this.obj[this.name]

}

// 这里写你要请求的地址

const result = await this.$ajax.post(

`/admin/incentive/queryRewardDetail`,queryObj

)

if (result.data.data) {

const cardList = result.data.data

cardList.forEach(e => {

this.cardResult.push({value: e.id+' '+e.word, picUrl: e.wordPic, id: e.id})

});

}

},

handleSelect(item) {

this.obj[this.name] = item.id+'' // 选中后给对应项赋值

this.isShow = false // 选中某一项后隐藏下拉列表框

}

}

}

.container {

position: absolute;

.selectLIst {

position: relative;

z-index: 10;

background-color: #FFFFFF;

box-shadow: 0 4px 3px #C5C5C5;

max-height: 200px;

overflow: auto;

.item {

height: 30px;

display: flex;

align-items: center;

justify-content: center;

}

.item:hover {

background-color: #EFEFEF;

}

}

ul {

list-style: none // 隐藏无序列表前面的小圆点

}

}

直接在需要的页面引入并使用：// item: { word: '' }

// 假如你要将input框与item的word属性绑定，则

关于找一找教程网

本站文章仅代表作者观点，不代表本站立场，所有文章非营利性免费分享。

本站提供了软件编程、网站开发技术、服务器运维、人工智能等等IT技术文章，希望广大程序员努力学习，让我们用科技改变世界。

[Vue 手写组件之实现一个可显示图片的自定义远程搜索框]http://www.zyiz.net/tech/detail-151000.html