打字机效果显示

打字机效果显示

一、效果图

二、视频效果

1. B站-打字机效果图

2. 打字机效果
   

   打字机效果

三、代码

框架：

 <div class="t_title">
			<span>我的能力</span>
<!--			<span>使用相关能力，场景任务一键搞定</span>-->
			<span>{{ currentTitle }}</span>
			<span class="flicker">_</span>
        </div>

方法：

//打印机效果
// const titleArr = ref(['使用相关能力，场景任务一键搞定','使用相关能力，场景任务一键搞定','使用相关能力，场景任务一键搞定','使用相关能力，场景任务一键搞定'])
const titleString = ref('使用相关能力，场景任务一键搞定')
const titleString_action = ref(0) // 显示到第几个字
const time = ref(null)
const currentTitle = computed(() => {
	return titleString.value.slice(0, titleString_action.value + 1)
})
const updateTitle = () => {
	titleString_action.value++
	if (titleString_action.value >= titleString.value.length) {
		clearInterval(time.value)
		setTimeout(() => {
			titleString_action.value = 0
			time.value = setInterval(updateTitle, 50)
		}, 1500)
	}
}
time.value = setInterval(updateTitle, 50)
onUnmounted(()=>{
	// console.log('销毁')
	if(time.value){
		clearInterval(time.value)
	}
})

样式：

.t_title {
    height: calc(25 / 1920 * 100vw);
    margin: .55vw 0 .3vw 0;
    display: flex;
    align-items: flex-end;
    font-weight: 400;

    & :first-child {
        font-size: calc(25 / 1920 * 100vw);
        line-height: calc(25 / 1920 * 100vw);
        color: #333333;
    }

	& :nth-child(2) {
		//flex: 1;
		margin-left: .7vw;
		font-size: calc(14 / 1920 * 100vw);
		color: rgba(51, 51, 51, 0.498039215686275);
		display: flex;
		align-items: center;
		margin-left: .7vw;
		font-size: calc(22 / 1920 * 100vw);
		color: rgba(18, 138, 230, 0.498);
		font-weight: bold;
		cursor: pointer;
	}

    & :last-child {
        font-size: calc(22 / 1920 * 100vw);
        color: rgba(18, 138, 230, 0.498);
        font-weight: bold;
        cursor: pointer;
    }
}
//输入下划线
.flicker {
	font-size: 14px;
	opacity: 0;
	animation: blink 1.5s infinite;
}
@keyframes blink {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}