【Vue】水印组件

前言：
最近在工作中接收到了一个给页面添加水印的需求，在网上看到了各种各样的写法，但是感觉写的都比较啰嗦或者复杂，就想着自己写个组件，可以在以后得工作中经常用到，目前是使用Vue技术写的，如果使用了其他技术比如React可以直接把语法换成React即可。
下面是参考代码：

waterMark.vue
<template><div class="water"><ul><li v-for="(item, index) in 8" :key="'waterLine' + index"><spanv-for="(it, idx) in randomNumber[index]":key="'waterItem' + index + idx">{{ name+ '\n' + id}}</span></li></ul></div>
</template><script>
export default {data() {return {name: '张三',id: '110034673'}},computed: {// 随机数randomNumber() {const arr = []for (let i = 0; i < 8; i++) {arr.push(Math.round(Math.random() * 6 + 4))}return arr},}
}
</script>
<style lang="scss" scoped>
.water {position: absolute;width: 180%;height: 135%;top: -20%;left: -17%;transform: rotate(325deg);pointer-events: none;ul {width: 100%;height: 100%;color: RGBA(0, 0, 0, 0.3);flex-wrap: wrap;pointer-events: none;li {width: 100%;height: 20%;display: flex;text-align: center;align-items: center;justify-content: center;font-size: 20px;span {margin-right: 50px;&:last-child {margin-right: 0;}}}}
}
</style>