【Daily Share】学一个很火的AIGC生成内容的展示效果

AIGC太火了，甲方爸爸开始有想法了。。。安排！！！

分析

• 1、初始：要有一个闪烁的效果
• 2、过程：字需要一个一个展示
• 3、结束：loading的内容要隐藏
• 4、其他：可以自己添加一些内容

实现

<script setup lang="ts">
import { ref } from 'vue'

const content = 'AIGC是Artificial Intelligence Generated Content的缩写，意为人工智能生成内容。'
let domContent = ref('') //真实展示的内容
let status = ref(1) //1:初始 2:加载 3:结束


const print = (delay = 50) => {

    domContent.value = '' //置空
    let index = 0 //索引

    // 定时器轮询
    let interval = setInterval(() => {
        domContent.value += content[index]
        index++
        status.value = 2

        if (index >= content.length) {
            status.value = 3
            clearInterval(interval) //记得清除定时器
        }
    }, delay)

}
script>

<template>
    <div class="layout">
        <div>
            <div :class="status == 1 ? 'typing blinking text' : (status == 2 ? 'typing text' : 'text')">{{ domContent }}div>
        div>

        <button class="btn" :disabled="status==2" @click="print()">
            <span class="text">打印文字span>
            <img src="../assets/rotate.png" width="20" height="20" class="rotate" v-if="status==2">
        button>
    div>
template>

<style scoped>
.layout {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.btn {
    display: flex;
    gap: 3px;
    align-items: center;
    justify-content: center;
}
.text{
    text-align: start;
    font-size: 2rem;
}

.typing::after {
    content: '‍♂️';
}

.blinking::after {
    animation: blinking 1s step-end infinite;
}

@keyframes blinking {
    0% {
        visibility: visible;
    }

    50% {
        visibility: hidden;
    }

    100% {
        visibility: visible;
    }
}

.rotate {
    animation: rotate 1s linear infinite;
}

@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }

    50% {
        transform: rotate(180deg);
    }

    100% {
        transform: rotate(360deg);
    }
}
style>