vue 绑定字符
可数 (vue-countable)
Vue binding for countable.js. Provides real-time paragraph, sentence, word, and character counting.
Vue绑定countable.js。 提供实时的段落,句子,单词和字符计数。
安装 (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
vue 绑定字符