vue组件底部外间距
vue-highlight-text (vue-highlight-text)
Vue component for highlight multiple istances of a word.
Vue组件用于突出显示单词的多个等距。
安装 (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组件底部外间距