Vue2使用cube-ui 實現搜索過濾、高亮功能

Posted on by

介紹

cube-ui 是基於 Vue.js 實現的精致移動端組件庫。

特性

  • 質量可靠由滴滴內部組件庫精簡提煉而來，經歷瞭業務一年多的考驗，並且每個組件都有充分單元測試，為後續集成提供保障。
  • 體驗極致以迅速響應、動畫流暢、接近原生為目標，在交互體驗方面追求極致。
  • 標準規范遵循統一的設計交互標準，高度還原設計效果；接口標準化，統一規范使用方式，開發更加簡單高效。
  • 擴展性強支持按需引入和後編譯，輕量靈活；擴展性強，可以方便地基於現有組件實現二次開發。

前言

蠻久沒更新 cube-ui 的功能實現瞭，公司要為售後部門做一個方便查看公司產品的一個項目，遇這需求，雖然常見但自己沒做過，在此做個例子當做記錄。

一、需求

流程：

在這裡插入圖片描述

實現效果：

功能實現

html

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

js

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

css

<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 的方式。有幸做過在這也不好解釋。

到此這篇關於Vue2使用cube-ui 實現搜索過濾、高亮功能的文章就介紹到這瞭,更多相關vue搜索過濾高亮內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：