vue-typed-js - vue.js的Typed.js集成。

Created at: 2018-05-15 03:31:07

Language: JavaScript

编号: https://github.com/Orlandster/vue-typed-js

License: MIT

vue类型的js

用于Typed.js的Vue.js集成。

Typed.js是一个类型库。输入任何字符串，并观看它以您设置的速度键入，退格所键入的内容，并为所设置的许多字符串开始一个新句子。

在此处签出正式项目。

安装

npm install --save vue-typed-js

默认导入

安装组件：

import Vue from 'vue'
import VueTypedJs from 'vue-typed-js'

Vue.use(VueTypedJs)

⚠️导入软件包时，包含一个css文件。您可能需要设置捆绑程序才能将CSS嵌入到页面中。

浏览器导入

<link rel="stylesheet" href="vue-typed-js/dist/vue-typed-js.css"/>

<script src="vue.js"></script>
<script src="vue-typed-js/dist/vue-typed-js.browser.js"></script>

该插件应自动安装。如果没有，您可以按照以下说明手动安装。

安装所有组件：

Vue.use(VueTypedJs)

用法

要开始使用，只需将

vue-typed-js

custom元素添加到您的元素中

template

并传递文本，该文本应输入到

strings

属性中。另外，您需要将带有类的元素传递

typing

到插槽，该插槽将用作

wrapper

。

最小设置：

<vue-typed-js :strings="['First text', 'Second Text']">
  <h1 class="typing"></h1>
</vue-typed-js>

该

typing

班还允许您为一个字符串的只是生命的某些部分：

<vue-typed-js :strings="['John', 'James']">
  <h1>Hey <span class="typing"></span></h1>
</vue-typed-js>

物产

您可以使用以下属性来自定义键入经验：

属性	类型	描述	用法
弦	数组	要输入的字符串	:strings="['Text 1', 'Text 2']"
stringsElement	串	包含字符串子元素的元素的ID	:stringsElement="'myId'"
速度类型	数	输入速度（以毫秒为单位）	:typeSpeed="50"
startDelay	数	开始输入之前的时间（以毫秒为单位）	:startDelay="1000"
后退速度	数	退格速度（以毫秒为单位）	:backSpeed="10"
smartBackspace	布尔型	仅退格与上一个字符串不匹配的内容	:smartBackspace="true"
洗牌	布尔型	洗弦	:shuffle="true"
backDelay	数	退格前的时间（以毫秒为单位）	:backDelay="100"
消退	布尔型	淡出而不是退格	:fadeOut="true"
fadeOutClass	串	淡入淡出动画的CSS类	:fadeOutClass="'fadeOutClass'"
fadeOutDelay	数	淡出延迟（以毫秒为单位）	:fadeOutDelay="500"
循环	布尔型	循环字符串	:loop="true"
loopCount	数	循环次数	:loopCount="3"
showCursor	布尔型	显示光标	:showCursor="true"
cursorChar	串	光标字符	:cursorChar="'_'"
autoInsertCss	布尔型	将游标的CSS插入并淡出HTML	:autoInsertCss="true"
属性	串	用于输入Ex的属性：输入占位符，值或仅HTML文本	:attr="'placeholder'"
bindInputFocusEvents	布尔型	如果el是文本输入，则绑定到焦点并模糊	:bindInputFocusEvents="true"
内容类型	串	纯文本使用'html'或'null'	:contentType="'html'"

大事记

您可以听以下事件：

事件	描述	用法
onComplete	所有输入均已完成	@onComplete="doSmth()"
preStringTyped	在键入每个字符串之前	@preStringTyped="doSmth()"
onStringTyped	键入每个字符串之后	@onStringTyped="doSmth()"
onLastStringBackspaced	循环期间，键入最后一个字符串后	@onLastStringBackspaced="doSmth()"
onTypingPaused	打字已停止	@onTypingPaused="doSmth()"
onTypingResumed	停止后已开始输入	@onTypingResumed="doSmth()"
onReset	重置后	@onReset="doSmth()"
onStop	停下来之后	@onStop="doSmth()"
onStart	开始之后	@onStart="doSmth()"
onDestroy	销毁后	@onDestroy="doSmth()"

特征

结帐功能，如

type pausing

，

smart backspacing

等图书馆的网页。

例子

以下是几个示例：

<!-- infinite loop -->
<vue-typed-js :strings="['awesome', 'brilliant']" :loop="true" @onComplete="doSmth()">
  <h2>We are a <span class="typing"></span> company!</h2>
</vue-typed-js>

<!-- type pausing -->
<vue-typed-js :strings="['This is text ^1000 which gets paused for 1 second', 'wow, interesting']">
  <h2 class="typing"></h2>
</vue-typed-js>

<!-- output html -->
<vue-typed-js :strings="['<p>Paragraph</p>', '<span>Span</span>']" :contentType="'html'">
  <h2 class="typing"></h2>
</vue-typed-js>

授权协议

MIT

vue-typed-js - vue.js的Typed.js集成。

vue类型的js

目录

安装

默认导入

浏览器导入

用法

物产

大事记

特征

例子

授权协议

About

Author：Orlandster

热门帖子

热门github