vue typical

Inglês | 简体中文

Vue típico

Vue animada digitando em ~ 400 bytes? de JavaScript. Visualização →

Demoção ao vivo https://vue-typical.vercel.app

? Instalação

Instale com o fio

yarn add vue-typical

Ou você pode

npm install vue-typical

Ou injete o script em sua página por JSDelivr CDN

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

Esta biblioteca apenas suporta vue 3 agora

Se você é Vue 2, consulte a filial v1 e instale [email protected]

Uso

1. Componente

Você pode importá -lo como um componente personalizado.

< 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 do plugin

Se você deseja configurar as opções padrão, pode registrar este plug -in através da API de uso do vue.js.

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

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

Se você usar a API do plug-in, o componente VTypical será registrado como um componente global, assim como a inclui com a tag script , mas você não precisará registrá-lo novamente através da propriedade components em seus próprios componentes.

3. API de composição

Você também pode criar animação típica pela API de composição useTypical .

 const ref = useTypical ( options ) ;

Em breve ...

? Propriedades

Prop	Obrigatório	Tipo	Por exemplo.
steps	Verdadeiro	Array <string | Número | Função>	['Hello', 1000, () => alert('Word')]
loop	Falso	Número	1 ou 'Infinity'
wrapper	Falso	Corda	'div'

Estilo

Adicione o efeito do cursor do piscar com a classe blink .

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

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

? Em breve

• A demonstração da API de composição no Vue 3.0
• Vue 2 e 3 suportado

? Contribuir

Instalar dependências,

$ npm i

Inicie o servidor dev,

$ npm start

Construir documentação,

$ npm run docs:build

Construir biblioteca via father-build ,

$ npm run build

❤️ Contribuidores

Obrigado a essas pessoas:

Sinta -se à vontade para aproveitar e participar do código aberto!

Stargazers

Obrigado pela sua estrela!

? Licença

Esta biblioteca é baseada no @Camwiegert/trabalho típico e atualmente é apenas um invólucro para o Vue.

Inspirado em @Catalinmiron/React-typical.

MIT © Turkyden