【Vue】水印组件

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

waterMark.vue
<template>
  <div class="water">
    <ul>
      <li v-for="(item, index) in 8" :key="'waterLine' + index">
        <span
          v-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>

在需要使用的页面引入上面的组件即可实现水印的功能。