搜索高亮文案组件封装

最新推荐文章于 2024-11-18 12:11:58 发布

小昭，快敲代码去~

最新推荐文章于 2024-11-18 12:11:58 发布

阅读量210

点赞数 3

文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/mzy110_/article/details/136815155

版权

实现已下图片功能
在这里插入图片描述

<template>
  <span>
    <template
      v-for="(text, index) in highLightCutTarget.cut"
    >{{ text }}<span
      v-if="index !== highLightCutTarget.cut.length - 1"
      :key="index"
      class="heightlight"
    >{{ highLightCutTarget.highlighText }}</span>
    </template>
  </span>
</template>
<script lang="ts">
import Vue from 'vue';
export default Vue.extend({
  props: {
    highLightText: {// 高亮目标字段
      type: String,
      default: '',
    },
    target: { // 被高亮每一行字段
      type: String,
      default: '',
    },
  },
  computed: {
    highLightCutTarget(): {
      cut: string[],
      highlighText?: string,
      } {
      // 正则匹配内容是否有匹配的搜索项
      const transformString = this.highLightText.replace(/[.[*?+^$|()/]|\]|\\/g, '\\$&');
      const pattern = new RegExp(transformString, 'i');
      // 获取匹配成功的搜索内容
      const [separator] = this.target.match(pattern) || [];
      // 未输入搜索项或未匹配成功返回原数据
      if (!this.highLightText || !separator) {
        return {
          cut: [this.target],
          highlighText: undefined,
        };
      }
      // 通过匹配内容切割原数据
      return {
        cut: this.target.split(separator),
        highlighText: separator,
      };
    },
  },
});
</script>
<style lang="less">
  .heightlight {
    background-color: rgb(255, 255, 87);
  }
</style>```