vue.js文本居中_Vue.js的文本荧光笔库

vue.js文本居中

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

Text highlighter library for Vue.js.

Vue.js的文本荧光笔库。

View Demo 查看演示 View Github 查看Github

安装 (Installation)

npm install --save vue-text-highlight
# or
yarn add vue-text-highlight

用法 (Usage)

基本用法 (Basic Usage)

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

Vue.component('text-highlight', TextHighlight);

// new Vue ...

SomeComponent.vue (SomeComponent.vue)

<template>
  <text-highlight :queries="queries">{{ description }}</text-highlight>
</template>

data() {
  return {
    queries: ['birds', 'scatt'],
    description: 'Tropical birds scattered as Drake veered the Jeep'
  };
}

输出量 (Output)

更多的选择 (More Options)

All available props in TextHighlight component are:

TextHighlight组件中所有可用的道具是：

• queries: Array<String|RegExp>|String|RegExp

  queries: Array<String|RegExp>|String|RegExp

  This prop accepts string, regex, and array of strings or regex. If array is given, it will highlight the union of matched strings/regex globally.

  该道具接受字符串，正则表达式以及字符串或正则表达式数组。 如果给出了array，它将在全局范围内突出显示匹配的字符串/正则表达式的并集。

• [caseSensitive]: Boolean

  [caseSensitive]: Boolean

  Whether string being searched is case sensitive.

  是否搜索字符串区分大小写。

• [diacriticsSensitive]: Boolean

  [diacriticsSensitive]: Boolean

  Whether string being searched is diacritics sensitive.

  是否搜索字符串对变音符号敏感。

• [highlightStyle]: Object|Array|String

  [highlightStyle]: Object|Array|String

  Styles to be applied to highlighted <mark>. Similar to style bindings in vue, it accepts Array syntax, Object syntax, or plain styling as String. This prop will then be merged with default highlight styles in TextHighlight component. See style binding in Vue.js.

  要应用于突出显示的<mark>样式。 与vue中的样式绑定类似，它接受Array语法， Object语法或纯样式作为String 。 然后，该道具将与TextHighlight组件中的默认突出显示样式合并。 请参阅Vue.js中的样式绑定。

• [highlightClass]: Object|Array|String

  [highlightClass]: Object|Array|String

  Classes to be added to highlighted <mark>. Similar to class bindings in vue, it accepts Array syntax, Object syntax, or class as String. See class binding in Vue.js.

  要添加到突出显示的<mark> 。 与vue中的类绑定相似，它接受Array语法， Object语法或class作为String 。 请参阅Vue.js中的类绑定。

• [highlightComponent]: Object|String

  [highlightComponent]: Object|String

  By default vue-text-highlight uses <mark> for the highlighting. Pass this props to override with other tag (string) or custom component (Vue component definition).

  默认情况下，vue-text-highlight使用<mark>突出显示。 将此道具传递给其他标签( string )或自定义组件(Vue组件定义)进行覆盖。

  This component will be passed with two props from text-highlight:

  该组件将与text-highlight两个道具一起传递：

  • index: Number

    index: Number

    Index of highlighted component.

    高亮组件的索引。

  • text: String

    text: String

    Highlighted words, equals to this.$slots.default[0].text

    高亮显示的单词，等于this.$slots.default[0].text

  For more details, see example below.

  有关更多详细信息，请参见下面的示例 。

• Other props and listeners that are not listed above are forwarded to the highlighted component. These props will be merged with higher precendence than index and text passed from text-highlight.

  上面未列出的其他道具和侦听器将转发到突出显示的组件。 与从text-highlight传递的index和text相比，这些道具的合并将具有更高的优先text-highlight 。

高级用法 (Advanced Usage)

There might be a case where you want to do more things with the highlighted words. For that reason, vue-text-highlight supports custom component for the highlighted words. In this case, the following example alerts on click.

在某些情况下，您可能希望使用突出显示的单词来做更多的事情。 因此，vue-text-highlight支持自定义组件来突出显示单词。 在这种情况下，以下示例在单击时发出警报。

OtherComponent.vue (OtherComponent.vue)

<template>
  <text-highlight
    :queries="queries"
    :highlightComponent="MyClickableComponent"
    :baz="foo"
    @customlistener="alert"
  >
    {{ description }}
  </text-highlight>
</template>

import MyClickableComponent from 'MyClickableComponent';

data() {
  return {
    queries: ['birds', 'scatt'],
    description: 'Tropical birds scattered as Drake veered the Jeep'
    MyClickableComponent,
    foo: 'bar',
  };
},
methods: {
  alert() {},
}

MyClickableComponent.vue (MyClickableComponent.vue)

<template>
  <mark class="custom" @click="$emit('customlistener')">
    <slot></slot>
  </mark>
</template>

props: {
  baz: String, // From OtherComponent.vue
  index: Number, // From TextHighlight
  text: String, // From TextHighlight, equals to `this.$slots.default[0].text`
}

翻译自: https://vuejsexamples.com/text-highlighter-library-for-vue-js/

vue.js文本居中