vue 文本显示组件

Vue高亮输入 (Vue Highlightable Input)

Highlight and style specific words as you're typing.

键入时突出显示和设置特定单词的样式。

安装 (Install)

npm install vue-highlightable-input --save

用法 (Usage)

在您的模板中添加以下内容： (In your template add this:)

<highlightable-input highlight-style="background-color:yellow" :highlight-enabled="highlightEnabled" :highlight="highlight" v-model="msg"
/>

在您的组件中添加以下内容： (In your component add this:)

import HighlightableInput from "vue-highlightable-input"
export default {name: 'HelloWorld',components : {HighlightableInput},data() {return {msg: '',highlight: [{text:'chicken', style:"background-color:#f37373"},{text:'noodle', style:"background-color:#fca88f"},{text:'soup', style:"background-color:#bbe4cb"},{text:'so', style:"background-color:#fff05e"},"whatever",{start: 2, end: 5, style:"background-color:#f330ff"}],highlightEnabled: true}},
}

道具 (Props)

高亮对象 (Highlight Object)

{text:'chicken', // Requiredstyle:"background-color:#f37373" // OptionalcaseSensitive: true // Optional defaults to False
}

范围对象 (Range Object)

{start:1, // Requiredend: 9,  // Requiredstyle:"background-color:#f37373" // Optional
}

End must be greater than start. The range end is exlusive in other words ==> start, end)

结束必须大于开始。 范围结束是排他性的，换句话说==>开始，结束)

大事记 (Events)

Note, that you can also you v-model

注意，您也可以v-model

一些注意事项 (Some notes)

• This is not meant to be used for large scale text highlight because of how inefficient div contentEditable is and also the fact the algorithm I'm using is stupidly inefficient (try entering like a lot of text for highlighting)

  这不适合用于大规模文本突出显示，因为div contentEditable效率很低，而且我使用的算法效率非常低(尝试输入很多文本来突出显示)

• Good use cases for this are something like what wit.ai does (they probably have a more efficient algorithm though) for highlighting recognized entities on the fly.

  良好的用例类似于wit.ai所做的事情(尽管它们可能具有更有效的算法)，以便即时突出显示已识别的实体。

• Let me know what other use cases you might have!

  让我知道您可能还有其他用例！

翻译自: https://vuejsexamples.com/a-vue-component-to-highlight-text-as-youre-typing/

vue 文本显示组件