vue typical

Английский | 简体中文

VUE Типично

Vue Animated Typling в ~ 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, см. 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

Если вы хотите настроить параметры по умолчанию, вы можете зарегистрировать этот плагин через API использования vue.js.

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

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

Если вы используете API плагина, VTypical Component будет зарегистрирован как глобальный компонент, как при включении его с тегом script , но вам не нужно будет перерегистрировать его через свойство components в своих собственных компонентах.

3. Композиция API

Вы также можете создать типичную анимацию с помощью композиционного API useTypical .

 const ref = useTypical ( options ) ;

Вскоре ...

? Характеристики

Проп	Необходимый	Тип	Например.
steps	Истинный	Массив <строка | Номер | Функция>	['Hello', 1000, () => alert('Word')]
loop	ЛОЖЬ	Число	1 или 'Infinity'
wrapper	ЛОЖЬ	Нить	'div'

Стиль

Добавьте эффект курсора Blink с помощью blink ClassEne.

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

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

? Вскоре

• Демонстрация композиции API в Vue 3.0
• Поддерживается Vue 2 и 3

? Способствовать

Установить зависимости,

$ npm i

Запустить сервер Dev,

$ npm start

Строить документацию,

$ npm run docs:build

Построить библиотеку через father-build ,

$ npm run build

❤ участники

Спасибо этим людям:

Пожалуйста, не стесняйтесь наслаждаться и участвовать в открытом исходном коде!

Звезды

Спасибо за вашу звезду!

? Лицензия

Эта библиотека основана на @Camwiegert/типичной работе, и в настоящее время она является просто оберткой для Vue.

Вдохновленный @Catalinmiron/React-типичный.

MIT © Turkyden