https://github.com/itmammoth/toneletter-vue

toneletter.js adapter for vue.js
https://github.com/itmammoth/toneletter-vue

Last synced: 3 months ago
JSON representation

toneletter.js adapter for vue.js

• Host: GitHub
• URL: https://github.com/itmammoth/toneletter-vue
• Owner: itmammoth
• Created: 2021-12-23T06:45:47.000Z (almost 3 years ago)
• Default Branch: master
• Last Pushed: 2021-12-23T09:54:18.000Z (almost 3 years ago)
• Last Synced: 2024-09-23T20:48:24.810Z (3 months ago)
• Language: HTML
• Size: 34.2 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# toneletter-vue

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

[toneletter.js](https://www.npmjs.com/package/toneletter)

# Installation

```bash

$ npm install toneletter-vue

```

# Usage

First, install as vue plugin:

```js

import Vue from "vue";

import ToneletterVue from 'toneletter-vue';

Vue.use(ToneletterVue);

```

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

```vue

```

# Options

You can pass options to `v-toneletter` directive.

| Option            | Description                                                           |

|-------------------|-----------------------------------------------------------------------|

| `lang`            | [See the toneletter.js](https://www.npmjs.com/package/toneletter)     |

| `phoneticSymbols` | [See the toneletter.js](https://www.npmjs.com/package/toneletter)     |

| `toneKeys`        | [See the toneletter.js](https://www.npmjs.com/package/toneletter)     |

| `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`.

```vue

  

...

const toneletter = this.$refs.text.toneletter;

toneletter.off();

...

```

# Contribute

Fork it, make pull request, free your mind.

```bash

$ npm install       # Install

$ npm run watch     # Watch and build

$ npm run build     # Build

$ npm run test:web  # Try toneletter with browser

```

# License

MIT License.