cube-ui 是基于 Vue.js 实现的精致移动端组件库。
蛮久没更新 cube-ui 的功能实现了，公司要为售后部门做一个方便查看公司产品的一个项目，遇这需求，虽然常见但自己没做过，在此做个例子当做记录。
<template>
<div class = "device-list-main">
<div class ="header">
<div class="header_title">
<cube-select v-model="selectValue" :options="selectOptions" ></cube-select>
</div>
<div class="header_input">
<cube-input v-model="searchValue" placeholder="请输入搜索值"
:maxlength=30
@input='showUpdatePropsPicker'></cube-input>
<div class="header_input_btn">
<img :src="searchImgUrl" />
</div>
</div>
</div>
</div>
</template><script>
import searchImgUrl from '@/../static/img/search.png'
export default {
name: 'DeviceSwitchList',
data () {
return {
searchImgUrl: searchImgUrl,
selectOptions: ['设备IMEI', '医院名称'],
selectValue: '',
searchValue: '',
titleName: '设备设置',
data: [{ text: 'R1210699001', value: 'R1210699001' }, { text: 'N1220203010', value: 'N1220203010' },
{ text: 'N1220203001', value: 'N1220203001' }, { text: 'N1220203002', value: 'N1220203002' },
{ text: 'R1220101005', value: 'R1220101005' }]
}
},
methods: {
showUpdatePropsPicker () {
var searchValueList = this.searchFilter(this.searchValue)
if (!this.updatePropsPicker) {
// 创建一个选择器
this.updatePropsPicker = this.$createPicker({
title: 'IMEI选择器',
data: [searchValueList],
onSelect: this.selectHandle,
onCancel: this.cancelHandle
})
}
// 展示
this.updatePropsPicker.show()
// 定时刷新
setTimeout(() => {
this.updatePropsPicker.$updateProps({
data: [searchValueList]
})
}, 100)
},
// 确认后
selectHandle (selectedVal, selectedIndex, selectedText) {
if (selectedVal !== '') {
this.searchValue = selectedVal[0].value
}
},
// 取消后
cancelHandle () {
},
// 筛选(重点)
searchFilter (searchValue) {
var searchValueList = []
if (searchValue !== '' || searchValue !== null) {
if (this.data !== [] || this.data.length > 0) {
for (let index = 0; index < this.data.length; index++) {
if (this.data[index].value.search(searchValue) !== -1) {
var highlight = `<span style="color: #fe7d2d;">${searchValue}</span>`
searchValueList.push({text: this.data[index].value.replace(searchValue, highlight), value: this.data[index]})
}
}
}
}
return searchValueList
}
}
}
</script><style scoped>
.device-list-main {
height: 100%;
}
/* 头部样式 */
.header {
width: 100%;
background: #fff;
padding: 0;
display: flex;
}
.header_title {
width: 30%;
float: left;
}
.cube-select {
padding: 0;
line-height: 2rem;
margin: 0.3rem;
font-size: small;
}
.cube-input {
float: left;
padding: 0;
font-size: small;
line-height: 0rem;
margin-top: 0.3rem;
width: 82%;
height: 2rem;
}
.cube-input::after {
border-radius: 1rem 0 0 1rem;
}
.header_input {
float: left;
width: 70%;
}
.header_input_btn {
float: left;
background-color: #eee;
width: 15%;
border-radius: 0 0.5rem 0.5rem 0;
margin-top: 0.3rem;
height: 2rem;
}
.header_input_btn img {
margin: 0.5rem;
height: 50%;
}
/* 设置搜索字体高亮 */
.highlight {
color: #fe7d2d;
}
.cube-popup-mask {
display: none;
overflow: hidden;
opacity: 0.4;
pointer-events: auto;
}
</style>
这只是简单的一种，还有很多种方法，这是在考虑数据量不大的情况下使用，如果数据量非常大，可以采用 Spring Boot集成elasticsearch 的方式。有幸做过在这也不好解释。
