typing

打字特效

• 模拟人手工打字的特效
• 如果有多段文本可以动态渲染,减少用户等待心智负担

基础用法

可以传入v-model值渲染

<template>
  <adv-typing v-model="typingText"></adv-typing>
  <el-input type="textarea" v-model="typingModel" @keydown.enter="handleEnter">
  </el-input>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { deepClone } from '@leisure-lib/utils';

const typingModel = ref('');
const typingText = ref('hello');

const handleEnter = () => {
  event.preventDefault();
  typingText.value = deepClone(typingModel.value); 
  // 此处要深克隆  不然下面的赋值会覆盖
  typingModel.value = '';
};
</script>

<style scoped></style>

模型接口

interface PropI {
  modelValue: string;
  accumulation: boolean;
}

属性

属性	值	是否必填	默认值	说明
v-model	string	否	''	渲染的文本值
accumulation	Boolean	否	true	展示的文本是累加还是清空重新渲染

插槽

插槽名	是否必填	默认值	说明