vue typical

英语| 简体中文

典型

vue动画打字在〜400个字节中？ JavaScript。预览→

实时演示https://vue-typical.vercel.app

？安装

使用纱线安装

yarn add vue-typical

或者您可以

npm install vue-typical

或在您的页面上注入JSdelivr cdn的脚本

 < script src =" https://cdn.jsdelivr.net/npm/vue-typical@latest/dist/vue-typical.umd.js " > </ script >

该库现在只支持VUE 3

如果您是VUE 2，请参阅分支V1并安装vue [email protected]

用法

1。组件

您可以将其作为自定义组件导入。

< template >
  < v-typical
    class = " blink "
    :steps = " ['Hello', 1000, 'Hello World !', 500, 'Hello World ! ', 1000] "
    :loop = " Infinity "
    :wrapper = " 'h2' "
  ></ v-typical >
</ template >

< script lang="ts">
import VTypical from ' vue-typical ' ;

export default {
  components: {
    VTypical ,
  },
};
</ script >

2。插件API

如果要配置默认选项，则可以通过vue.js的使用API注册此插件。

 // main.js or index.js
import VTypical from 'vue-typical' ;

Vue . use ( VTypical , {
  /* options */
} ) ;

如果使用插件API， VTypical组件将被注册为全局组件，就像将其与script标签一起时一样，但是您不需要通过您自己的组件中的components属性重新注册它。

3。构图API

您还可以通过构图API useTypical创建典型的动画。

 const ref = useTypical ( options ) ;

即将推出 ...

？特性

支柱	必需的	类型	例如。
steps	真的	数组<string |数字|功能>	['Hello', 1000, () => alert('Word')]
loop	错误的	数字	1或'Infinity'
wrapper	错误的	细绳	'div'

风格

使用blink className添加眨眼光标效果。

. blink :: after {
  content : '|' ;
  animation : blink 1 s infinite step-start;
}

@keyframes blink {
  50 % {
    opacity : 0 ;
  }
}

？即将推出

• VUE 3.0中的组成API演示
• 支持的VUE 2和3

？贡献

安装依赖项，

$ npm i

启动开发服务器，

$ npm start

构建文档，

$ npm run docs:build

通过father-build建造图书馆，

$ npm run build

❤️贡献者

谢谢这些人：

请随时享受并参与开源！

观星者

谢谢你的明星！

？执照

该库基于 @camwiegert/典型的工作，目前只是Vue的包装。

受 @catalinmiron/反应典型的启发。

麻省理工学院©Turkyden