1.0.2 • Published 2 years ago
hight-light v1.0.2
Hight Light Brush
高亮展示内容
安装
npm i hight-light
例子
//在main.js中
import highlight from 'hight-light'
Vue.use(highlight)
// 在vue中
<template>
  <highlight
    text="从这个角度来看,
    了解清楚随机一段废话到底是一种怎么样的存在,
    是解决一切问题的关键.在这种困难的抉择下,
    本人思来想去, 寝食难安.达尔文说过一句著名的话,
    敢于浪费哪怕一个钟头时间的人,说明他还不懂得珍惜生命的全部价值。
    这句话看似简单,但其中的阴郁不禁让人深思. 一般来说, 这是不可避免的.
    随机一段废话似乎是一种巧合,但如果我们从一个更大的角度看待问题,
    这似乎是一种不可避免的事实. 那么"
    :keywords="['这个', '随机一段', '关键', '不禁让人深思']"
  >
  </highlight>
  <highlight
    text="Lorem ipsum dolor sit,
    amet consectetur adipisicing elit. Nam,
    rem quis laudantium assumenda laborum,
    ipsum totam, ab aut impedit quisquam ullam
    dicta facilis. Impedit dolore dicta labore
    rem. Eaque, dignissimos."
    :keywords="['impedit', 'elit', 'consectetur', 'labore']"
    light="#e74c2c"
    color="#fff"
  ></highlight>
</template>
<script>
export default {
  name: 'App',
};
</script>
Props
| 参数 | 说明 | 类型 | 默认值 | 是否必填 | 
|---|---|---|---|---|
| text | 指定需要进行关键字高亮的文本内容。 | String | 无 | 是 | 
| keywords | 指定用于匹配的关键字数组。 | Array | [] | 是 | 
| light | 指定高亮颜色的 CSS 颜色值。 | String | "#fbda32" | 否 | 
| color | 指定文本颜色的 CSS 颜色值. | String | "" | 否 | 
| customStyle | 自定义样式 | Object | "" | 否 | 
| highlightFirstOnly | 是否只高亮第一个关键字 | Boolean | false | 否 |