vue+ts代码雨[自定义雨点]

Vue3+ts代码雨[自定义雨点]

随缘学vue3，用watchEffect把代码雨代码翻了一下，包了个组件，可以自定义雨点并显示了，直接上码了

<script setup lang="ts">
let stuff: Ref = ref("0123456789ABCDEF"); //定义雨点内容
import { ref, onMounted, Ref, watchEffect } from 'vue'; //watchEffect监听变化
const scene: Ref<any> = ref();
let content: string[] = Array.from(stuff.value);

onMounted(() => {
    const myCanvas: HTMLCanvasElement = scene.value;
    let ctx = myCanvas.getContext('2d');
    let arr = Array(Math.ceil(myCanvas.width)).fill(0);
    myCanvas.width = 1080;
    myCanvas.height = 480;

    const rain = () => {
        if (ctx) {
            ctx.fillStyle = 'rgba(0,0,0,0.05)';//设置渐变消失
            ctx.fillRect(0, 0, myCanvas.width, myCanvas.height);
            ctx.fillStyle = "#fff";//设置文字颜色
            arr.forEach((item, index) => {
                console.log(item, index);
                if (ctx) ctx.fillText(content[Math.floor(Math.random() * content.length)], index * 10, item + 10); 
                arr[index] = item > myCanvas.height || item > 6000 * Math.random() ? 0 : item + 10;
            })
        }
    }
    setInterval(rain, 40);

    watchEffect(() => {
        content = Array.from(stuff.value);//监视数据的变化,变化就执行
        rain();
    });
});


</script>
<template>
    <div class="container">
        <p class="show-text">{{ stuff }}</p>
        <input v-model="stuff" class="input-field">
        <canvas ref="scene" class="canvas"></canvas>
    </div>
</template>

<style scoped>
canvas {
    display: block;
}

.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    font-family: Arial, sans-serif;
}

.input-field {
    border: none;
    background-color: #2d2d2d;
    color: #fff;
    padding: 10px;
    font-size: 16px;
    width: 200px;
    height: 40px;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.canvas {
    background-color: #2d2d2d;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.show-text {
    border: none;
    background-color: #fff;
    color: #2d2d2d;
    padding: 0.5rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
</style>