vue代码补全vue 指令_Vue指令突出显示一个单词的多个等距

vue代码补全vue 指令

提示灯 (vue-highlighter)

Vue directive for highlight multiple istances of a word.

Vue指令突出显示一个单词的多个等距。

安装 (Install)

yarn add vue-highlighter

CDN: UNPKG | jsDelivr (available as window.vueHighlighter)

CDN： UNPKG | jsDelivr (可作为window.vueHighlighter )

用法 (Usage)

---

---

版本1.1.2( 已弃用 ) (Version 1.1.2 (Deprecated))

<template>
  <p v-highlight:word="'Alessandra'">I love Alessandra</p>
</template>

<script>
import vueHighlighter from 'vue-highlighter'

export default {
  directives: {
    vueHighlighter
  }
}
</script>

---

---

版本2.1.2(和> =) (Version 2.1.2 ( and >= ))

<template>
  <p v-highlight="{ word: word, live: live }" >{{ text }}</p>
</template>

<script>
import vueHighlighter from 'vue-highlighter'

export default {
  data: () => {
    return {
      text: 'I love Alessandra , AlessandraGiulio',
      word: 'Alessandra',
      live: false,
    }
  },
  directives: {
    vueHighlighter
  }
}
</script>

选项 (Option)

Word (String): The text string to look for and highlight

Word(字符串) ：要查找并突出显示的文本字符串

data: () => {
  return {
    text: 'I love Alessandra',
    word: 'Alessandra',
    live: true,
  }
}

Word (Array[String]): List of text strings to look for and highlight

Word(Array [String]) ：要查找并突出显示的文本字符串列表

data: () => {
  return {
    text: 'I love Alessandra',
    word: ['I', 'Alessandra'],
    live: true,
  }
}

Live: Allow to highlight word and substring, by automatically changhe the regex expression The live attribute is an optional attribute, is set to false by default

Live ：通过自动更改正则表达式表达式来突出显示单词和子字符串live属性是可选属性，默认情况下设置为false

data: () => {
  return {
    text: 'I love Alessandra',
    word: 'Alessandra',
    live: true,
  }
}

Color: Allow to customize the color of text when highlighted The color attribute is optional and is set to #fff by default color can be HEX or String

颜色 ：突出显示时允许自定义文本的颜色color属性是可选的，默认情况下设置为#fff颜色可以是HEX或String

data: () => {
  return {
    text: 'I love Alessandra',
    word: 'Alessandra',
    style: {
      color: '#ffddee'
    }
  }
}

Background Color: Allow to customize the background color of text when highlighted The bgColor attribute is optional and is set to #009688 by default bgColor can be HEX or String

背景颜色 ：突出显示时允许自定义文本的背景颜色bgColor属性是可选的，默认情况下设置为＃009688 bgColor可以是HEX或String

data: () => {
  return {
    text: 'I love Alessandra',
    word: 'Alessandra',
    style: {
      bgColor: '#ffddee'
    }
  }
}

Padding: Allow to customize the padding of text when highlighted The padding attribute is optional and is set to 0px 5px by default padding is validate if match this requirments: there is at least one number followed by one of this unit of measure ['cm','mm','in','px','pt','pc','em','ex','ch','rem','vw','vh','vmin','vmax','%']

填充 ：突出显示时允许自定义文本的填充填充属性是可选的，默认设置为0px 5px如果符合以下要求，填充将被验证：至少有一个数字，后跟一个此度量单位['cm' ，'mm'，'in'，'px'，'pt'，'pc'，'em'，'ex'，'ch'，'rem'，'vw'，'vh'，'vmin'，' vmax'，'％']

data: () => {
  return {
    text: 'I love Alessandra',
    word: 'Alessandra',
    style: {
      padding: '4rem 5%'
    }
  }
}

工作于 (Works on)

• Paragraph

  段

• Ul

  乌尔

• Ol

  OL

• Button

  纽扣

• A

  一个

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

vue代码补全vue 指令