更新记录

1.0.0（2025-07-05）

v1.0.0

• 初始版本发布
• 支持基础打字机效果
• 支持自定义速度和光标
• 支持循环播放和动态控制

平台兼容性

uni-app(4.05)

其他

vshare-Typewriter 打字机效果插件

一个用于uniapp的打字机效果插件，实现对话模型的平均速度逐字打印效果。

特性

• ✅ 平均速度逐字打印，避免一坨一坨展现
• ✅ 可自定义打字速度
• ✅ 支持光标闪烁效果
• ✅ 支持循环播放
• ✅ 支持动态文本切换
• ✅ 提供完整的控制方法
• ✅ 支持完成回调
• ✅ 兼容多端（H5、小程序、App）

安装使用

1. 引入组件

<template>
  <view>
    <vshare-typewriter :text="message" :speed="100" />
  </view>
</template>

<script>
import VshareTypewriter from '@/components/vshare-typewriter/vshare-typewriter.vue'

export default {
  components: {
    'vshare-typewriter': VshareTypewriter
  },
  data() {
    return {
      message: '这是一个打字机效果示例，文字会逐字显示。'
    }
  }
}
</script>

2. 全局注册（可选）

在 main.js 中全局注册：

import Vue from 'vue'
import VshareTypewriter from '@/components/vshare-typewriter/vshare-typewriter.vue'

Vue.component('vshare-typewriter', VshareTypewriter)

3. 使用插件方式（推荐）

import VshareTypewriter from '@/components/vshare-typewriter'

// 自动注册为 vshare-typewriter 组件
Vue.use(VshareTypewriter)

API 文档

Props

Events

Methods

通过 ref 可以调用以下方法：

使用示例

基础用法

<template>
  <view>
    <vshare-typewriter :text="message" />
  </view>
</template>

<script>
export default {
  data() {
    return {
      message: '欢迎使用vshare-typewriter打字机效果插件！'
    }
  }
}
</script>

自定义速度

<template>
  <view>
    <!-- 快速打字 -->
    <vshare-typewriter :text="fastMessage" :speed="50" />

    <!-- 慢速打字 -->
    <vshare-typewriter :text="slowMessage" :speed="200" />
  </view>
</template>

循环播放

<template>
  <view>
    <vshare-typewriter 
      :text="message" 
      :loop="true" 
      :loopDelay="3000"
      @onComplete="onComplete"
    />
  </view>
</template>

<script>
export default {
  data() {
    return {
      message: '这条消息会循环播放'
    }
  },
  methods: {
    onComplete() {
      console.log('打字效果完成')
    }
  }
}
</script>

无光标效果

<template>
  <view>
    <vshare-typewriter :text="message" :showCursor="false" />
  </view>
</template>

动态控制

<template>
  <view>
    <vshare-typewriter ref="typewriter" :text="message" :autoStart="false" />
    <button @click="start">开始</button>
    <button @click="stop">停止</button>
    <button @click="reset">重置</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      message: '可以通过按钮控制打字效果'
    }
  },
  methods: {
    start() {
      this.$refs.typewriter.start()
    },
    stop() {
      this.$refs.typewriter.stop()
    },
    reset() {
      this.$refs.typewriter.reset()
    }
  }
}
</script>

动态文本切换

<template>
  <view>
    <vshare-typewriter ref="typewriter" :text="currentText" />
    <button @click="changeText">切换文本</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      texts: [
        '第一段文本',
        '第二段文本',
        '第三段文本'
      ],
      currentIndex: 0
    }
  },
  computed: {
    currentText() {
      return this.texts[this.currentIndex]
    }
  },
  methods: {
    changeText() {
      this.currentIndex = (this.currentIndex + 1) % this.texts.length
      this.$nextTick(() => {
        this.$refs.typewriter.start()
      })
    }
  }
}
</script>

样式自定义

插件提供了基础的样式，你可以通过CSS自定义外观：

<style>
/* 自定义打字机容器样式 */
.typewriter-container {
  background-color: #f0f0f0;
  padding: 20rpx;
  border-radius: 10rpx;
}

/* 自定义文本样式 */
.typewriter-text {
  font-size: 32rpx;
  line-height: 1.5;
  color: #333;
}

/* 自定义光标样式 */
.cursor {
  color: #007aff;
  font-weight: bold;
}
</style>

推荐配置

速度设置建议

// 快速展示
speed: 50

// 标准对话
speed: 100

// 重要信息
speed: 150

// 紧张氛围
speed: 200

常用属性组合

<!-- 循环播放重要信息 -->
<vshare-typewriter 
  :text="importantMessage" 
  :speed="120"
  :loop="true"
  :loopDelay="3000"
/>

<!-- 无光标标题 -->
<vshare-typewriter 
  :text="title" 
  :speed="80"
  :showCursor="false"
/>

<!-- 可控制的对话 -->
<vshare-typewriter 
  ref="dialogTypewriter"
  :text="dialogText" 
  :speed="100"
  :autoStart="false"
  @onComplete="onDialogComplete"
/>

注意事项

1. 性能优化：对于长文本，建议适当调整速度，避免过于频繁的DOM更新
2. 内存管理：组件会在销毁时自动清理定时器，无需手动处理
3. 兼容性：插件兼容uniapp支持的所有平台
4. 响应式：支持动态修改text属性，会自动重新开始打字效果

测试和示例

• example.vue - 完整的使用示例
• test.vue - 测试页面，包含各种功能演示

更新日志

v1.0.0

• 初始版本发布
• 支持基础打字机效果
• 支持自定义速度和光标
• 支持循环播放和动态控制