更新记录

0.0.2（2024-07-26） 下载此版本

• fix: 修复缺少依赖

0.0.1（2024-07-26） 下载此版本

-init

平台兼容性

lime-highlight 高亮文本

• 参照 vant 实现的文本高亮, 作用是高亮指定文本内容

安装

在插件市场导入即可

代码演示

基本使用

你可以通过 keywords 指定需要高亮的关键字，通过 text 指定文本。

<l-highlight keywords="难题" text="慢慢来，不要急，生活给你出了难题，可也终有一天会给出答案。" />

多字符匹配

如果需要指定多个关键字，以数组的形式传入 keywords。

<l-highlight :keywords="['难题', '终有一天', '答案']" text="慢慢来，不要急，生活给你出了难题，可也终有一天会给出答案。"  />

设置高亮标签类名

通过 highlight-class 可以设置高亮标签的类名，以便自定义样式。

<l-highlight keywords="生活" highlight-class="custom-class" text="慢慢来，不要急，生活给你出了难题，可也终有一天会给出答案。"  />

设置高亮样式

通过 highlight-style 可以设置高亮标签的样式。

<l-highlight keywords="生活" highlight-class="custom-class" text="慢慢来，不要急，生活给你出了难题，可也终有一天会给出答案。"  />

插槽

通过 插槽 可以自由设置样式。

<l-highlight keywords="生活" highlight-style="color: red" text="慢慢来，不要急，生活给你出了难题，可也终有一天会给出答案。" >
    <template #default="{item}">
        <text :style="{color: item.highlight? '#07c160': '#8e69d3'}">{{item.text}}</text>
    </template>
</l-highlight>

API

Props

打赏

如果你觉得本插件，解决了你的问题，赠人玫瑰，手留余香。