vue.js 插件_Vue.js的Text Swimlane插件

vue.js 插件

Vue-Swimlane (vue-swimlane)

An Text Swimlane plugin for Vue.js in alpha stage. a list of words as aan animated text Swimlane.

Alpha阶段Vue.js的Text Swimlane插件。 动画列表Swimlane中的单词列表。

View demo 查看演示 Download Source 下载源

如何使用 (How to use)

安装 (Install)

npm install vue-swimlane --save

npm install vue-swimlane --save

插入main.js或需要的地方 (Plug in your main.js or where required)

import Vue from 'vue'
import Swimlane from 'vue-swimlane'

Vue.use(Swimlane)

用 (Use)

<vue-swimlane :words="wordsArray" :circular="circular" :rows="rows" :scale="scale" :transitionDuration="duration" :transitionDelay="delay" :transition="transition" :pauseOnHover="true"></vue-swimlane>

<vue-swimlane :words="wordsArray" :circular="circular" :rows="rows" :scale="scale" :transitionDuration="duration" :transitionDelay="delay" :transition="transition" :pauseOnHover="true"></vue-swimlane>

选件 (Options)

Following options can be passed as props.

以下选项可以作为道具传递。

• words - string[] - required: Array of tags or words to be used on display.

  单词 -字符串[]- 必需 ：要用于显示的标签或单词的数组。

• circular - bool (Default: false): If true, list starts from the top after completion.

  圆形 -bool(默认值：false)：如果为true，则列表从完成后的顶部开始。

• pauseOnHover - bool (Default: false): If true, animation will pause on mouse hover.

  pauseOnHover -bool(默认值：false)：如果为true，动画将在鼠标悬停时暂停。

• rows - int (Default: 1): Number of rows always visible at a time.

  rows -int(默认值：1)：一次始终可见的行数。

• scale - float (Default: 1): Font size scaling relative to 16px.

  scale -float(默认值：1)：相对于16px的字体大小缩放。

• transitionDuration - float in ms (Default: 500): Animation duration for rows.

  transitionDuration-以毫秒为单位的浮点数(默认值：500)：行的动画持续时间。

• transitionDelay - float in ms (Default: 250): Delays between each animation duration.

  transitionDelay-以毫秒为单位的浮点数(默认值：250)：每个动画持续时间之间的延迟。

• transition - string (Default: ease-out): css transition name.

  transition-字符串(默认值：easy-out)：css过渡名称。

翻译自: https://vuejsexamples.com/a-text-swimlane-plugin-for-vue-js/

vue.js 插件