typed.js_Typed.js集成可轻松创建打字动画
typed.js
Vue类型的js (vue-typed-js)
A Vue.js integration for Typed.js.
用于Typed.js的Vue.js集成。
Typed.js is a library that types. Enter in any string, and watch it type at the speed you've set, backspace what it's typed, and begin a new sentence for however many strings you've set.
Typed.js是一个类型库。 输入任何字符串，并观看它以您设置的速度键入，退格所键入的内容，并为所设置的许多字符串开始一个新句子。
安装 (Installation)
npm install --save vue-typed-js默认导入 (Default import)
Install the component:
安装组件：
import Vue from 'vue'
import { VueTypedJs } from 'vue-typed-js'
Vue.use(VueTypedJs)⚠️ A css file is included when importing the package. You may have to setup your bundler to embed the css in your page.
import️导入软件包时包含一个css文件。 您可能需要设置捆绑程序才能将CSS嵌入到页面中。
浏览器导入 (Browser import)
<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>The plugin should be auto-installed. If not, you can install it manually with the instructions below.
该插件应自动安装。 如果没有，您可以按照以下说明手动安装。
Install all the components:
安装所有组件：
Vue.use(VueTypedJs)用法 (Usage)
To get started simply add the vue-typed-js custom element to your template and pass the text, which should be typed to the strings property. In addition you need to pass an element with the class typing to the slot, which will be used as a wrapper.
要开始使用，只需将vue-typed-js自定义元素添加到template然后传递文本，该文本应输入到strings属性。 另外，您需要将具有类typing的元素传递到插槽，它将用作wrapper 。
Minimal setup:
最小设置：
<vue-typed-js :strings="['First text', 'Second Text']">
<h1 class="typing"></h1>
</vue-typed-js>The typing class also allows you to just animate certain parts of a string:
typing类还允许您仅对字符串的某些部分设置动画：
<vue-typed-js :strings="['John', 'James']">
<h1>Hey <span class="typing"></span></h1>
</vue-typed-js>物产 (Properties)
You can make use of the following properties in order to customize your typing expirience:
您可以使用以下属性来自定义键入经验：
| Property | Type | Description | Usage |
|---|---|---|---|
| strings | Array | strings to be typed | :strings="['Text 1', 'Text 2']" |
| stringsElement | String | ID of element containing string children | :stringsElement="'myId'" |
| typeSpeed | Number | type speed in milliseconds | :typeSpeed="50" |
| startDelay | Number | time before typing starts in milliseconds | :startDelay="1000" |
| backSpeed | Number | backspacing speed in milliseconds | :backSpeed="10" |
| smartBackspace | Boolean | only backspace what doesn't match the previous string | :smartBackspace="true" |
| shuffle | Boolean | shuffle the strings | :shuffle="true" |
| backDelay | Number | time before backspacing in milliseconds | :backDelay="100" |
| fadeOut | Boolean | Fade out instead of backspace | :fadeOut="true" |
| fadeOutClass | String | css class for fade animation | :fadeOutClass="'fadeOutClass'" |
| fadeOutDelay | Boolean | fade out delay in milliseconds | :fadeOutDelay="true" |
| loop | Boolean | loop strings | :loop="true" |
| loopCount | Number | amount of loops | :loopCount="3" |
| showCursor | Boolean | show cursor | :showCursor="true" |
| cursorChar | String | character for cursor | :cursorChar="'_'" |
| autoInsertCss | Boolean | insert CSS for cursor and fadeOut into HTML | :autoInsertCss="true" |
| attr | String | attribute for typing Ex: input placeholder, value, or just HTML text | :attr="'placeholder'" |
| bindInputFocusEvents | Boolean | bind to focus and blur if el is text input | :bindInputFocusEvents="true" |
| contentType | String | 'html' or 'null' for plaintext | :contentType="'html'" |
| 属性 | 类型 | 描述 | 用法 |
|---|---|---|---|
| 弦 | 数组 | 要输入的字符串 | :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="true" |
| 循环 | 布尔型 | 循环字符串 | :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'" |
大事记 (Events)
You can listen to the following events:
您可以听以下事件：
| Event | Description | Usage |
|---|---|---|
| onComplete | All typing is complete | @onComplete="doSmth()" |
| preStringTyped | Before each string is typed | @preStringTyped="doSmth()" |
| onStringTyped | After each string is typed | @onStringTyped="doSmth()" |
| onLastStringBackspaced | During looping, after last string is typed | @onLastStringBackspaced="doSmth()" |
| onTypingPaused | Typing has been stopped | @onTypingPaused="doSmth()" |
| onTypingResumed | Typing has been started after being stopped | @onTypingResumed="doSmth()" |
| onReset | After reset | @onReset="doSmth()" |
| onStop | After stop | @onStop="doSmth()" |
| onStart | After start | @onStart="doSmth()" |
| onDestroy | After destroy | @onDestroy="doSmth()" |
| 事件 | 描述 | 用法 |
|---|---|---|
| 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()" |
特征 (Features)
Checkout features like type pausing, smart backspacing etc. on the libraries page.
库页面上的结帐功能，如type pausing ， smart backspacing等。
例子 (Examples)
Here are several examples:
以下是几个示例：
<!-- 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>翻译自: https://vuejsexamples.com/typed-js-integration-to-easily-create-typying-animations/
typed.js