VUE——使用easy-typer-js实现打字机效果

简介: VUE——使用easy-typer-js实现打字机效果

前言

github:https://github.com/pengqiangsheng/easy-typer-js

内容

安装

npm install easy-typer-js --save

封装

print.js

import EasyTyper from 'easy-typer-js'
export default {
  data() {
    return {
      windowHeight: 0,
      obj: {
        output: '',
        isEnd: false,
        speed: 80,
        singleBack: false,
        sleep: 10,
        type: 'custom',
        backSpeed: 40,
        sentencePause: false
      }
    }
  },
  methods: {
    initTyped(input) {
      const obj = this.obj
      const typed = new EasyTyper(obj, input)
    }
  },
}

index.js

import share from './src/share.js';
import printText from './src/print.js'
export { share, printText }

使用

<template>
  <view class="flex color_gradient" :style="{height:windowHeight+'rpx'}" @click="userDetail">
    <view class="flex justify-center align-center">
      <view class="text-white text-bold text-sl text-center padding">{{ obj.output }}
        <span class="typed-cursor">|</span>
      </view>
    </view>
  </view>
</template>
<script>
  import { printText } from '@/mixins/index.js'
  export default {
    mixins: [printText],
    data() {
      return {
          windowHeight:0,
           obj: {
                  output: '',
              speed: 100,
                }
        }
    },
    created() {
      let that = this
      uni.getSystemInfo({
        success(res) {
          that.windowHeight = res.windowHeight*2
        }
      })
    },
    mounted() {
      this.initTyped('王洋')
    },
    methods: {
      userDetail(){
        wx.navigateTo({
          url: '../info/index',
        })
      }
    }
  }
</script>

效果

学无止境,谦卑而行.

目录
相关文章
|
2月前
|
数据采集 JavaScript Android开发
【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
72 7
【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
|
6月前
|
JavaScript 前端开发 开发者
VUE 开发——Node.js学习(一)
VUE 开发——Node.js学习(一)
136 2
|
8月前
|
JSON JavaScript 前端开发
JavaScript 详解——Vue基础
【8月更文挑战第16天】
84 3
JavaScript 详解——Vue基础
|
5月前
|
JavaScript 前端开发 开发者
JavaScript框架React vs. Vue:一场性能与易用性的较量
JavaScript框架React vs. Vue:一场性能与易用性的较量
101 0
|
7月前
|
JavaScript 前端开发 API
Vue学习笔记3:对比纯JavaScript和Vue实现数据更新的实时视图显示
Vue学习笔记3:对比纯JavaScript和Vue实现数据更新的实时视图显示
|
6月前
|
JavaScript 前端开发 应用服务中间件
vue前端开发中,通过vue.config.js配置和nginx配置,实现多个入口文件的实现方法
vue前端开发中,通过vue.config.js配置和nginx配置,实现多个入口文件的实现方法
323 0
|
6月前
|
JavaScript
深入解析:JS与Vue中事件委托(事件代理)的高效实现方法
深入解析:JS与Vue中事件委托(事件代理)的高效实现方法
123 0
|
6月前
|
JavaScript 前端开发
前端js,vue系统使用iframe嵌入第三方系统的父子系统的通信
前端js,vue系统使用iframe嵌入第三方系统的父子系统的通信
|
7月前
|
前端开发 JavaScript 开发者
Express.js与前端框架的集成:React、Vue和Angular的示例与技巧
本文介绍了如何将简洁灵活的Node.js后端框架Express.js与三大流行前端框架——React、Vue及Angular进行集成,以提升开发效率与代码可维护性。文中提供了详细的示例代码和实用技巧,展示了如何利用Express.js处理路由和静态文件服务,同时在React、Vue和Angular中构建用户界面,帮助开发者快速掌握前后端分离的开发方法,实现高效、灵活的Web应用构建。
178 3
|
8月前
|
JSON JavaScript 前端开发
Android调用Vue中的JavaScript代码
Android调用Vue中的JavaScript代码
117 3

热门文章

最新文章

AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等