toneletter-vue

toneletter-vue is a vue.js plugin for toneletter.js

toneletter.js

Installation

$ npm install toneletter-vue

Usage

First, install as vue plugin:

import Vue from "vue";
import ToneletterVue from 'toneletter-vue';

Vue.use(ToneletterVue);

toneletter-vue provides v-toneletter directive to make your input field toneletterized.

<!-- Basic usage -->
<textarea v-toneletter="{ lang: 'th' }"></textarea>

<!-- For chinese pinyin -->
<inut type="text" v-toneletter="{ lang: 'cn' }"></inut>

<!-- disabled -->
<inut type="text" v-toneletter="false"></inut>

Options

You can pass options to v-toneletter directive.

| Option | Description | |-------------------|-----------------------------------------------------------------------| | lang | See the toneletter.js | | phoneticSymbols | See the toneletter.js | | toneKeys | See the toneletter.js | | autoObserve | true or false whether start observation when the element is bound |

Handle with javascript

You can have access to Toneletter instance via element.toneletter.

<template>
  <textarea v-toneletter="{ lang: 'th' }" ref="text"></textarea>
</template>

<script>
...
const toneletter = this.$refs.text.toneletter;
toneletter.off();
...
</script>

Contribute

Fork it, make pull request, free your mind.

$ npm install       # Install
$ npm run watch     # Watch and build
$ npm run build     # Build
$ npm run test:web  # Try toneletter with browser

License

MIT License.