hight-light

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	否