z-base-ui

Appearance

ZHighlight ​

  • 用于突出显示某些内容或某一段落。
  • 支持精准匹配和模糊匹配
  • 版本：>= 1.2.0

基础用法 ​

z-base-ui是一个UI组件库。 
<template>
  <z-highlight :keywords="['z-base-ui', 'ui']">
    z-base-ui是一个UI组件库。
  </z-highlight>
</template>


<script setup lang="ts">
import { ZHighlight } from "@d7ee/z-base-ui";
</script>

严格模式 ​

在严格模式下，会区分大小

zbaseui是一个UI组件库，ZBASEUI是一个ui组件库, 
<template>
  <z-highlight :keywords="['zbaseui', 'ui']" case>
    zbaseui是一个UI组件库，ZBASEUI是一个ui组件库,
  </z-highlight>
</template>


<script setup lang="ts">
import { ZHighlight } from "@d7ee/z-base-ui";
</script>

标签 ​

除去默认样式外，我们还预设了一种形态标签。

z-base-ui是一个UI组件库。 
<template>
  <z-highlight :keywords="['z-base-ui', 'ui']" mode="tag">
    z-base-ui是一个UI组件库。
  </z-highlight>
</template>


<script setup lang="ts">
import { ZHighlight } from "@d7ee/z-base-ui";
</script>

多彩 ​

除去默认的样式外，你还可以自定义选中的样式。

z-base-ui是一个UI组件库。


z-base-ui是一个UI组件库。


z-base-ui是一个UI组件库。 
<template>
  <z-highlight :keywords="['z-base-ui', 'ui']" mode="tag" highlight-bg="#42a5f5" highlight-color="#ec407a" bold>
    z-base-ui是一个UI组件库。
  </z-highlight>
  <br>
  <br>
  <z-highlight :keywords="['z-base-ui', 'ui']" mode="tag" highlight-bg="#f06292" highlight-color="#fff" bold>
    z-base-ui是一个UI组件库。
  </z-highlight>
  <br>
  <br>
  <z-highlight :keywords="['z-base-ui', 'ui']" mode="tag" highlight-bg="purple" highlight-color="cyan" bold>
    z-base-ui是一个UI组件库。
  </z-highlight>
</template>


<script setup lang="ts">
import { ZHighlight } from "@d7ee/z-base-ui";
</script>

自定义 ​

除了上述的效果外，还支持自定义效果。

z-base-ui是一个UI组件库。 
<template>
  <div class="box">
    <z-highlight :keywords="['z-base-ui', 'ui']">
      z-base-ui是一个UI组件库。
    </z-highlight>
  </div>
</template>


<script setup lang="ts">
import { ZHighlight } from "@d7ee/z-base-ui";
</script>

<style lang="less" scoped>
.box:deep(.z-highlight_active ){
  padding: 2px 4px;
  background: red;
  color: #ffffff;
  font-size: 20px;
  font-weight: bold;
  margin: 0 2px;
}
</style>

模糊匹配 ​

以下是一个常见的报道，组合使用了各类属性。

财联社5月29日电，美国政府效率部负责人埃隆·马斯克在其社交媒体平台X上发文表示，在他作为特别政府雇员的任期即将结束之际，他想感谢美国总统特朗普给予的减少政府浪费性支出的机会。 相关新闻 被马斯克批评后，特朗普回应 （观察者网） 在马斯克抱怨大规模税改法案后，美国总统特朗普表示，计划就该法案的各个方面进行谈判。 当地时间27日，据美国哥伦比亚广播公司（CBS）报道，马斯克在受访时表示，获得特朗普大力支持的“大而美”税改法案，上周在美国国会众议院通过，这让他感到非常“失望”。 马斯克称，这是一项“巨额支出法案”，它会增加联邦赤字，并“破坏”他领导的政府效率部（Doge）的工作。“我认为，一项法案它可以‘大’，也可以‘美’。但我不知道它能否两者兼具。这是我的个人观点。” 据路透社报道，当地时间28日，在白宫椭圆形办公室被媒体问及马斯克的相关言论时，特朗普为自己的议程辩护，谈到了该法案谈判中涉及的微妙政治因素，但并没有直接回应马斯克的担忧。 
<template>
  <div class="box">
    <z-highlight :keywords="str" bold mode="tag" highlight-bg="#ec407a" highlight-color="#fff">
      <div>
        财联社5月29日电，美国政府效率部负责人埃隆·马斯克在其社交媒体平台X上发文表示，在他作为特别政府雇员的任期即将结束之际，他想感谢美国总统特朗普给予的减少政府浪费性支出的机会。
        相关新闻

        被马斯克批评后，特朗普回应 <em>（观察者网）</em>

        在马斯克抱怨大规模税改法案后，美国总统特朗普表示，计划就该法案的各个方面进行谈判。

        当地时间27日，据美国哥伦比亚广播公司（CBS）报道，马斯克在受访时表示，获得特朗普大力支持的“大而美”税改法案，上周在美国国会众议院通过，这让他感到非常“失望”。

        马斯克称，这是一项“巨额支出法案”，它会增加联邦赤字，并“破坏”他领导的政府效率部（Doge）的工作。“我认为，一项法案它可以‘大’，也可以‘美’。但我不知道它能否两者兼具。这是我的个人观点。”

        据路透社报道，当地时间28日，在白宫椭圆形办公室被媒体问及马斯克的相关言论时，特朗普为自己的议程辩护，谈到了该法案谈判中涉及的微妙政治因素，但并没有直接回应马斯克的担忧。
      </div>
    </z-highlight>
  </div>
</template>

<script setup lang="ts">
import { ZHighlight } from "@d7ee/z-base-ui";
import {ref} from "vue";

const str = ref(["破坏", "在马斯克.*后", "cbs", "doge", "大而美", "失望", "特朗普为自己的.*因素", "路透社", "巨额支出法案"]);
</script>

<style lang="less" scoped>
.box {
  font-size: 20px;
  line-height: 40px;
}
</style>

API 属性 ​

属性名说明类型默认值
keywords高亮内容，模糊匹配时使用.*连接string[]—
case是否区分大小写booleanfalse
bold高亮内容是否加粗显示booleanfalse
mode默认，有标签和文本两种模式tag | normalnormal
highlight动态高亮，控制是否高亮booleantrue
highlightBg高亮内容的背景色string—
highlightColor高亮内容的字体颜色string—