vue突出显示文本中的内容 - vue-word-highlighter

vue突出显示文本中的内容 - vue-word-highlighter
插件名称 vue-word-highlighter
发布时间 2021年8月4日
插件作者 kawamataryo

一个 Word 荧光笔,可让您突出显示文本中的任何内容。

与 Vue 3 和 Vue 2 应用程序兼容。

使用

1. 导入并注册 Word 荧光笔。

import { defineComponent } from "vue";
import WordHighlighter from "vue-word-highlighter";
export default defineComponent({
  name: "App",
  components: {
    WordHighlighter,
  },
  setup() {
    return {};
  },
});

2. 将您的内容添加到 Word Highlighter 组件并确定查询字符串或正则表达式。

<WordHighlighter query="vue">
www.vue365.cn
</WordHighlighter>

3.所有默认组件道具。

query: {
  type: [String, Object] as PropType<string | RegExp>,
  required: true,
},
caseSensitive: {
  type: Boolean,
  default: false,
},
splitBySpace: {
  type: Boolean,
  default: false,
},
highlightClass: {
  type: [Object, String, Array],
  default: "",
},
highlightStyle: {
  type: [Object, String, Array],
  default: "",
},
highlightTag: {
  type: String,
  default: "mark",
},
wrapperTag: {
  type: String,
  default: "span",
},
wrapperClass: {
  type: [Object, String, Array],
  default: "",
},