vue 绑定字符_Vue绑定countable.js提供实时的段落和字符计数

vue 绑定字符

可数 (vue-countable)

Vue binding for countable.js. Provides real-time paragraph, sentence, word, and character counting.

Vue绑定countable.js。 提供实时的段落，句子，单词和字符计数。

View demo 查看演示 Download Source 下载源

安装 (Install)

# npm
npm i vue-countable

# yarn
yarn add vue-countable

Or you can include it through the browser at the bottom of your page:

或者，您可以通过页面底部的浏览器将其包括在内：

<script src="https://unpkg.com/vue-countable"></script>

<script src="https://unpkg.com/vue-countable"></script>

关于 (About)

Simple way to count characters, words, sentences, and paragraphs in your Vue apps.

计算Vue应用中字符，单词，句子和段落的简单方法。

Pass your text as a prop to the provided component, along with a unique id, and register for the change event to get real-time count updates.

将您的text作为道具传递给提供的组件以及唯一的id ，并注册change事件以获取实时计数更新。

使用范例 (Usage Example)

import VueCountable from 'vue-countable'
Vue.component('vue-countable', VueCountable)

<!-- In your html - Make sure the id prop is unique on your page. -->
<vue-countable
    :text="myText" // Your text variable
    :id="'myId'" // A unique string id
    @change="change" // Register for the change event
></vue-countable>

<!-- The @change function -->
change (event) {
    console.log(event)
    // event.words to get word count, etc.
}

Now, anytime (and on component initialization) your myText variable changes, vue-countable will emit an event containing the details of your text. Register for this event as shown above to get your real-time counts.

现在， myText您的myText变量发生更改(以及在组件初始化时)， vue-countable都会发出一个事件，其中包含文本的详细信息。 如上所示注册此事件以获取您的实时计数。

道具 (Props)

prop	type	description
text	String	Text you want to track.
id	String	A unique id for your tracking instance. This allows you to have multiple different counts on the same page.
hardReturns	Boolean (Optional, defaults to false)	Require two returns to count paragraphs
stripTags	Boolean (Optional, defaults to false)	Remove HTML before counting
ignore	Array of Strings (Optional, defaults to empty)	Characters to be ignored.

Struts	类型	描述
文本	串	您要跟踪的文本。
ID	串	跟踪实例的唯一ID。 这使您可以在同一页面上进行多个不同的计数。
hardReturns	布尔值(可选，默认为false)	需要两次返回才能计算段落
stripTags	布尔值(可选，默认为false)	计数前删除HTML
忽视	字符串数组(可选，默认为空)	要忽略的字符。

大事记 (Events)

event	value	description
change	Object	Provides character, word, sentence, paragraph, and all values.

事件	值	描述
更改	目的	提供character ， word ， sentence ， paragraph和all值。

发展历程 (Development)

# install dependencies
npm install

# serve with hot reload
npm run watch

# build demo page
npm run build:example

# build
npm run build

# publish to npm
npm version patch
npm publish

翻译自: https://vuejsexamples.com/vue-binding-for-countable-js-provides-real-time-paragraph-and-character-counting/

vue 绑定字符