vue typical

Inglés | 简体中文

Vue típico

Vue Tiping animado en ~ 400 bytes? de JavaScript. Vista previa →

Demo en vivo https://vue-typical.vercel.app

? Instalación

Instalar con hilo

yarn add vue-typical

O puedes

npm install vue-typical

O inyectar el script en su página por jsdelivr cdn

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

Esta biblioteca solo admite Vue 3 ahora

Si es Vue 2, consulte la rama V1 e instale [email protected]

Uso

1. Componente

Puede importarlo como un 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 de complemento

Si desea configurar las opciones predeterminadas, puede registrar este complemento a través de la API de uso de Vue.js.

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

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

Si usa la API del complemento, el componente VTypical se registrará como un componente global como cuando lo incluye con la etiqueta script , pero no necesitará volver a registrarlo a través de la propiedad components en sus propios componentes.

3. Composición API

También puede crear una animación típica mediante la composición API useTypical .

 const ref = useTypical ( options ) ;

Muy pronto ...

? Propiedades

Apuntalar	Requerido	Tipo	P.ej.
steps	Verdadero	Matriz <cadena | Número | Función>	['Hello', 1000, () => alert('Word')]
loop	FALSO	Número	1 o 'Infinity'
wrapper	FALSO	Cadena	'div'

Estilo

Agregue el efecto del cursor Blink con blink ClassName.

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

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

? Muy pronto

• La demostración de la API de composición en Vue 3.0
• Vue 2 y 3 compatible

? Contribuir

Instalar dependencias,

$ npm i

Inicie el servidor Dev,

$ npm start

Construir documentación,

$ npm run docs:build

Construir biblioteca a través de father-build ,

$ npm run build

❤️ Colaboradores

Gracias a estas personas:

¡No dude en disfrutar y participar en código abierto!

Gazers de estrellas

¡Gracias por tu estrella!

? Licencia

Esta biblioteca se basa en @Camwiegert/Work típico y actualmente es solo un envoltorio para Vue.

Inspirado en @catalinmiron/react-typical.

MIT © Turkyden