uniapp实现光标闪烁（配合自己的键盘）

前言

因为公司业务需要，所以我们...

演示

其实就是Chat自动打字效果

代码

键盘请看这篇文件

<template>
<view class="list"><view class="title"><text>手机号码</text></view><view class="typewriter-content"><text class="value">{{mobile}}</text><text class="cursor">|</text></view>
</view>
</template>
<script>export default {data() {return {mobile: '',}},}
</script>
<style lang="scss" scoped>.list {margin-bottom: 16rpx;.typewriter-content {height: 40rpx;border-radius: 10rpx;border: 2rpx solid #222;display: flex;	align-items: center;.value {font-size: 16rpx;margin-left: 4rpx;color: #222;}.cursor {// 控制光标大小font-size: 20rpx;font-weight: bold;margin-left: 4rpx;animation: flash 1s linear infinite;color: #000;}@keyframes flash {0% {opacity: 1;}80% {opacity: 0;}100% {opacity: 1;}}}.title {// font-size: 24rpx;margin-top: -4rpx;margin-bottom: 8rpx;}
}
</style>