Skip to content

monkindey/vue-ityped

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

7 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Vue-ityped

awesome ityped for vue

Example

Live Demo

Dependencies

  • Vue
  • ityped@0.0.8

Usage

HTML

<span v-typed.showCursor="{typeSpeed: 100}">
	<span>Dead simple animated typing</span><br>
	<span>No jQuery dependency.</span><br>
	<span>Tiny size: <3kb.</span><br>
	<span>Just install and Enjoy!</span>
</span>

Vue

import vueTyped from 'vue-ityped';

var vm = new Vue({
	el: '#app',
	directives: {
		typed: vueTyped
	}
});

Configuration

Almost same to ityped Configuration, but a little different is

  • Put the configuartion in different place, you can pass the configuration to the directive value, like that:
<span v-typed="{typeSpeed: 100, backSpeed: 50, startDelay: 500}">
</span>
  • showCursor and loop use in vue directive modifiers, like that:
<span v-typed.showCursor="">
</span>

just like make the ityped configuration showCursor is true, so do loop.

  • the directive element's children text will be equal to ityped strings, when you have multi children, you should make them line break, for example the <br> tag

Thanks

Powered by vue.js and ityped