@aburai/vue-highlight 中文文档教程

发布于 4年前 浏览 23 项目主页 更新于 3年前

vue-highlight

UNDER CONSTRUCTION - use at own risc and create issues

Introduction

vue-highlightVue.js 的插件。 功能包括:

  • options for finetuning (see default options)
  • option for debugging (logs highlighting workflow)

Install

来自 npm:

$ npm install @aburai/vue-highlight --save
$ yarn add @aburai/vue-highlight

Usage

append plugin to Vue

import Vue from 'vue'
import VueHighlight from '@aburai/vue-highlight'
Vue.use(VueHighlight)

default options

{
  wordsOnly: false,
  caseSensitive: false,
  notGlobal: true,
  defaultSelector: 'div',
  nodeName: 'span',
  className: 'v-highlight',
  classNameStopWord: 'v-highlight v-highlight--stopword',
  ignore: 'v-highlight--ignore',
  splitter: [',', '/'],
  debug: false
}

use plugin

onInput(value) {
    this.$highlight(value, 'td', {
      wordsOnly: false,
      caseSensitive: false,
      notGlobal: true
    })
}
.v-highlight {
    padding: 0 1px;
    font-size: 105%;
    font-weight: 500;
    color: #000;
    background: yellow;
    &.v-highlight--stopword {
        background: red;
    }
}

License

MIT

Copyright (c) 2019-present André Bunse (aburai)

Special Thanks

to vue-router 作为一个好的 vue 插件模板的样板

vue-highlight

UNDER CONSTRUCTION - use at own risc and create issues

Introduction

vue-highlight is a plugin for Vue.js. Features include:

  • options for finetuning (see default options)
  • option for debugging (logs highlighting workflow)

Install

From npm:

$ npm install @aburai/vue-highlight --save
$ yarn add @aburai/vue-highlight

Usage

append plugin to Vue

import Vue from 'vue'
import VueHighlight from '@aburai/vue-highlight'
Vue.use(VueHighlight)

default options

{
  wordsOnly: false,
  caseSensitive: false,
  notGlobal: true,
  defaultSelector: 'div',
  nodeName: 'span',
  className: 'v-highlight',
  classNameStopWord: 'v-highlight v-highlight--stopword',
  ignore: 'v-highlight--ignore',
  splitter: [',', '/'],
  debug: false
}

use plugin

onInput(value) {
    this.$highlight(value, 'td', {
      wordsOnly: false,
      caseSensitive: false,
      notGlobal: true
    })
}
.v-highlight {
    padding: 0 1px;
    font-size: 105%;
    font-weight: 500;
    color: #000;
    background: yellow;
    &.v-highlight--stopword {
        background: red;
    }
}

License

MIT

Copyright (c) 2019-present André Bunse (aburai)

Special Thanks

to vue-router as a boilerplate for a good vue plugin template

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文