vue组件底部外间距_Vue组件，用于突出显示单词的多个等距

vue组件底部外间距

vue-highlight-text (vue-highlight-text)

Vue component for highlight multiple istances of a word.

Vue组件用于突出显示单词的多个等距。

View demo 查看演示 Download Source 下载源

安装 (Installation)

# with yarn
yarn add vue-highlight-text

# with npm
npm install --save vue-highlight-text

使用组件 (Use component)

import Vue from 'vue';
import HighlightText from 'vue-highlight-text';

Vue.component('HighlightText', HighlightText);

使用指令 (Use directive)

import Vue from 'vue';
import highlight from 'vue-highlight-text/public/directive';

Vue.directive('highlight', highlight);

在文件中 (In file vue)

<!-- component -->
<HighlightText :keyword="keyword" :sensitive="sensitive">{{msg}}</HighlightText>
<!-- Directive -->
<span v-highlight="{keyword: keyword}">{{msg}}</span>

指令的道具或价值 (Props or value of directive)

Name	Type	Default	Description
keyword	string	''	word for highlight in message.
sensitive	bool	true	highlight with case sensitive
overWriteStyle	Object	{color: '#00C1E8'}	custom highlight for overwrite style by HTML DOM Style Object

名称	类型	默认	描述
关键词	串	''	消息中突出显示的单词。
敏感	布尔	真正	区分大小写
overWriteStyle	目的	{颜色：“＃00C1E8”}	用于通过HTML DOM样式对象覆盖样式的自定义突出显示

翻译自: https://vuejsexamples.com/vue-component-for-highlight-multiple-istances-of-a-word/

vue组件底部外间距