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