vue2 vant-ui 实现搜索过滤、高亮功能

前言

回顾之前，使用cube-ui实现公司售后部门方便查看公司产品状态及配置设备的一个移动端项目，其中有个小功能 cube-ui 实现搜索过滤、高亮功能。cube-ui 实现搜索过滤、高亮功能地址，如何呢，售后开始搞事了，说这个功能不好用什么的，不能粘贴啥的（因为我设置了点击就弹让他选的），说要换个 UI ，说这 UI 不好用。

一、需求

流程

需求还是一样，只是 ui 变了，逻辑也会变点

实现效果

原效果：

现效果：

差别： 其实效果没多大变化，只是更换了 UI 和选择框标题修改为输入框

功能实现

概述： vant 实现是通过输入框（van-field） 事件触发 弹出层（van-popup），弹出层（van-popup）中包括了 选择器（van-picker）

html（子组件）

<template>
  <div>
    <!-- 输入框 -->
    <van-field v-model="obj.imei" placeholder="请输入IMEI" @focus="onChange" @input="onChange"/>
    <!-- 弹出层 -->
    <van-popup v-model="show" @close="onClose" position="bottom">
      <div class="from-popup">
        <van-picker show-toolbar :columns="obj.imeis" @confirm="confirm" @cancel="cancel">
            <template #title>
              <div class="from-popup-field">
                <van-field
                v-model="obj.imei"
                placeholder="输入IMEI号"
                :center='true'
                @input="onChange"
                @focus="onChange"
                clearable
                />
              </div>
            </template>
        </van-picker>
      </div>
    </van-popup>
  </div>
</template>

js（子组件）

<script>
// 判断工具
import emptyUtil from '@/utils/emptyUtil'
// 过滤高亮工具
import searchFilterUtil from '@/utils/searchFilterUtil'
export default {
  // 接收父组件传过来的对象
  props: {
    obj: { type: Object, default: null }
  },
  data () {
    return {
      // 是否显示弹出层
      show: false
    }
  },
  methods: {
    // 输入框触发弹出层事件
    onChange () {
      var searchValueList = []
      // 判断是否已经显示弹出层
      if (this.show) {
        searchValueList = searchFilterUtil.searchFilterByArray(this.obj.imei, this.obj.imeisSave)
        if (emptyUtil.arrayIsNotBlank(searchValueList)) {
          this.obj.imeis = searchValueList
        }
      } else {
        this.show = true
        searchValueList = searchFilterUtil.searchFilterByArray(this.obj.imei, this.obj.imeisSave)
        if (emptyUtil.arrayIsNotBlank(searchValueList)) {
          this.obj.imeis = searchValueList
        }
      }
    },
    // vant 选择器确认
    confirm (values) {
      if (values.value === 0) {
        this.obj.imei = ''
      } else {
        this.obj.imei = values.value
      }
      this.show = false
      this.$emit('submitImeiSelectFilter', this.obj)
    },
    // vant 选择器取消
    cancel () {
      this.obj.imei = ''
      this.show = false
    },
    // 关闭
    onClose () {
      this.show = false
    }
  }
}
</script>

css

<style scoped>
.from-popup-field >>> .van-field__control {
  display: block;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  color: #323233;
  line-height: inherit;
  text-align: center;
  background-color: rgb(229, 230, 231);
  border: 0;
  resize: none;
}
.from-popup >>> .van-picker__cancel {
  color: #fc9153;
}
.from-popup >>> .van-picker__confirm{
  color: #fc9153;
}
</style>

searchFilterUtil 封装工具

/**
 *@Description: 搜索筛选工具
 *@MethodAuthor: lanys
 *@Date: 2022-03-23 18:12:39
 *@version: 1.0
*/
import emptyUtil from '@/utils/emptyUtil'
export default {

  /**
   *@Description: 搜索筛选、高亮(data=对象)
   *@MethodAuthor: lanys
   *@Date: 2022-03-24 09:42:08
   *@version: 1.0
   *searchValue：搜索值
   *data参数固定样式：{id:绑定值, value: 展示}
  */
  searchFilterByObject (searchValue, data) {
    var searchValueList = []
    // 搜索筛选、高亮
    if (emptyUtil.stringIsNotBlank(searchValue)) {
      if (data !== [] || data.length > 0) {
        for (let index = 0; index < data.length; index++) {
          if (emptyUtil.objectIsNotBlank(data[index]) && data[index].value.search(searchValue) !== -1) {
            let highlight = `<span style="color: #fe7d2d;">${searchValue}</span>`
            searchValueList.push({text: data[index].value.replace(searchValue, highlight), value: {id: data[index].id, value: data[index].value}})
          }
        }
      }
    } else {
      // 默认获取全部
      for (let index = 0; index < data.length; index++) {
        if (emptyUtil.objectIsNotBlank(data[index]) && data[index].value.search(searchValue) !== -1) {
          searchValueList.push({text: data[index].value, value: {id: data[index].id, value: data[index].value}})
        }
      }
    }
    if (emptyUtil.arrayisEmpty(searchValueList)) {
      searchValueList.push({text: '设备列表无当前IMEI', value: 0})
    }
    return searchValueList
  },
  /**
   *@Description: 搜索筛选、高亮(data=数组)
   *@MethodAuthor: AuthorName
   *@Date: 2022-04-15 11:42:58
   *@version: 1.0
   *searchValue：搜索值
   *data：数组
  */
  searchFilterByArray (searchValue, data) {
    var searchValueList = []
    // 搜索筛选、高亮
    if (emptyUtil.stringIsNotBlank(searchValue)) {
      if (data !== [] || data.length > 0) {
        for (let index = 0; index < data.length; index++) {
          if (emptyUtil.objectIsNotBlank(data[index]) && data[index].search(searchValue) !== -1) {
            let highlight = `<span style="color: #fe7d2d;">${searchValue}</span>`
            searchValueList.push({text: data[index].replace(searchValue, highlight), value: data[index]})
          }
        }
      }
    } else {
      // 默认获取全部
      for (let index = 0; index < data.length; index++) {
        if (emptyUtil.objectIsNotBlank(data[index]) && data[index].search(searchValue) !== -1) {
          searchValueList.push({text: data[index], value: data[index]})
        }
      }
    }
    if (emptyUtil.arrayisEmpty(searchValueList)) {
      searchValueList.push({text: '设备列表无当前IMEI', value: 0})
    }
    return searchValueList
  }
}

父组件（测试）

<template>
    <div>
      <imeiSelectFilter :obj="obj" @submitImeiSelectFilter="submitImeiSelectFilter"></imeiSelectFilter>
    </div>
</template>

<script>
import emptyUtil from '@/utils/emptyUtil'
import imeiSelectFilter from '@/views/device_switch/components/imei_select_filter'
export default {
  name: 'DeviceList',
  data () {
    return {
      // 子组件过滤高亮子组件对象
      obj: {
        imei: '',
        // IMEIS展示
        imeis: ['1R210601001', 'R1211103002', 'R1211103009', 'R1220101003'],
        // IMEIS存储
        imeisSave: ['1R210601001', 'R1211103002', 'R1211103009', 'R1220101003']
      }
    }
  },
  // 注册子组件
  components: {
    imeiSelectFilter
  },
  methods: {
    // IMEI搜索过滤子组件
    submitImeiSelectFilter (obj) {
      console.log('obj:', obj)
      if (emptyUtil.objectIsNotBlank(obj)) {
        if (emptyUtil.stringIsNotBlank(obj.imei)) {
          this.obj.imei = obj.imei
          // 校验IMEI 是否争正确
          this.checkImei();
        }
      }
    }
  }
}
</script>