更新记录

1.0.1(2019-09-01)

修复 keys 属性为 空字符串 时的报错问题

1.0.0(2019-09-01)

第一个版本


平台兼容性

指定内容高亮

script 中引用组件

import highlight from "@/components/helang-highlight/helang-highlight.vue"

export default {
    components: {
        "helang-highlight":highlight
    }
}

template 中添加组件

<helang-highlight 
    :content="content" 
    :keys="keys" 
    :color="color" 
    :weight="weight"
></helang-highlight>

参数说明:

参数名 类型 默认值 说明
content String "" 需要高亮的内容
keys String "" 高亮的关键字,多个用 | 隔开
color Color #FD463E 高亮颜色
weight Boolean false 是否加粗

小编提醒:

组件内部使用的是 <rich-text> 组件,可支持的内容请查看官方文档中对该组件的说明。

源码示例:

<!-- template 代码 -->
<helang-highlight 
    :content="content" 
    :keys="keys" 
    :color="color"
    :weight="weight"
></helang-highlight>

<!-- script 代码 -->
import highlight from "@/components/helang-highlight/helang-highlight.vue"
export default {
    components: {
        "helang-highlight":highlight
    },
    data() {
        return {
            keys:"QQ|6|9",
            content:`
                    联系QQ:1846492969
                    `,
            color:"#0099FF",
            weight:true
        }
    }
}

友情提示:

  1. 当前项目源码使用了 ES6 和 scss 请添加运行依赖
  2. [插件ZIP]只包含模板文件和数据文件,不包含项目运行依赖(如 pages.json)
  3. [示例项目ZIP]是完整的项目文件,可下载后导入 HBuilderX 中直接运行体验
  4. 文件下载在当前页面的上部靠右位置,有 [下载插件ZIP] [下载示例项目ZIP] 按钮,点击即可下载

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问