vue-qin

Vue 的琴弦文字插件。

Examples

To see a demo.

Installation

npm install vue-qin

Usage

import Vue from 'vue';
import VueQin from 'vue-qin';
// let VueQin = window.VueQin;  // window
// let VueQin = require('vue-qin');  // commonjs

// regist 注册组件

Vue.use(VueQin);  // global

// or

new Vue({
    el: 'body',
    components: { VueQin }  // local
});

<vue-qin
    :content="'This is the content to show'"
    :duration="500"
    :recline="0.6"
    :offset="22"
></vue-qin>

Support

IE9 and IE9+

Api

Properties

Name	Type	Default	Description
content	String	''	The content you want to show. 要显示的文字。
duration	Number	500	The animation duration. 每次弹动对动画时长。
recline	Number	0.6	Animation's wave distance between two chars. 动画时候2个字符间的波动距离。值越大波动越大。
offset	Number	22	Max offset of each char move. 字符最大的可移动距离。

Enjoy it! :D