vue typical

영어 | 简体中文

vue 전형적인

~ 400 바이트의 Vue 애니메이션 타이핑? 자바 스크립트. 미리보기 →

라이브 데모 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 인 경우 Branch V1을 참조하고 [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

Composition API useTypical 에 의해 일반적인 애니메이션을 만들 수도 있습니다.

 const ref = useTypical ( options ) ;

곧 올다 ...

? 속성

소품	필수의	유형	예를 들어.
steps	진실	배열 <문자열 | 번호 | 기능>	['Hello', 1000, () => alert('Word')]
loop	거짓	숫자	1 또는 'Infinity'
wrapper	거짓	끈	'div'

스타일

blink 클래스 이름으로 깜박임 커서 효과를 추가하십시오.

. 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/react-typical에서 영감을 얻었습니다.

MIT © Turkyden