更新记录

1.0.0（2026-05-12） 下载此版本

实现打字机效果

平台兼容性

uni-app(4.01)

six-typewriter打字机效果

six-typewriter实现打字机效果，可自定义闪烁光标及颜色等。

1. 基础使用

<template>
    <view class="pages">
        <view class="box">
            <six-typewriter ref="typewriterRef" :text="textVal"></six-typewriter>
        </view>
        <view class="box">
            <six-typewriter ref="typewriterRef1" :textStyle="textStyle" :cursorStyle="cursorStyle" :text="textVal1" cursorSymbol="·"></six-typewriter>
        </view>
        <view @click="butFun" class="but">重新动画</view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                textVal:`six-typewriter打字机效果
                six-typewriter打字机效果`,
                textVal1:'',
                textStyle:{
                    color:'#f00',
                    fontSize:'30rpx'
                },
                cursorStyle:{
                    color:'green',
                    fontSize:'40rpx',
                    fontWeight:'bold',
                    lineHeight:'30rpx'
                }
            }
        },
        onLoad() {
            let _this = this
            setTimeout(function(){
                _this.textVal1 = `six-typewriter打字机效果
                six-typewriter打字机效果`
            },2000)
        },
        methods: {
            butFun(){
                this.$refs.typewriterRef.startPrint()
                this.$refs.typewriterRef1.startPrint()
            },
        }
    }
</script>

<style lang="scss" scoped>
    .pages {
        height: 100vh;
        width: 100vw;
    }

    .box{
        width: calc(96% - 40rpx);
        padding: 20rpx;
        background-color: #f9f9f9;
        border-radius: 20rpx;
        margin: 20rpx 2%;
    }

    .but{
        margin-top: 20rpx;
        background-color: #409EFF;
        height: 100rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 96%;
        margin-left: 2%;
        border-radius: 20rpx;
        color: #fff;
        font-size: 30rpx;
        font-weight: bold;
    }
</style>

2. prop属性说明

3. sixCountUp Methods

4. Popup Events

5. 效果预览