随机背景案例

随机背景案例

本文主要是展示使用自定义vue指令来实现的案例。它主要用于在网络环境差的情况下，图片可能会加载不出来，这时我们可以让原本应该显示图片的地方使用一个随机背景色来填充，在图片装载完成后使用图片来覆盖原来填充了随机色的地方。
代码如下：

<template>
    <div v-img="'src/assets/logo.png'"></div>
</template>

<script setup lang="ts">
import { Directive, DirectiveBinding} from 'vue'

// 自定义指令
const vImg: Directive = {
    mounted(el: HTMLElement, binding: DirectiveBinding) {
        //console.log(el)
        // 定义一个随机的 6 位数
        let color = Math.floor(Math.random() * 1000000)
        //console.log(color);
        el.style.backgroundColor = '#' + color

        //console.log(binding.value);
        // 创建 image 对象
        const img = new Image()
        img.src = binding.value
        img.onload = () => {
            el.style.backgroundImage = 'url(' + img.src + ')'
        }
    }
}

</script>

<style>
body,html,#app {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
div {
    width: 100%;
    height: 100%;
}
</style>