前言:
最近在工作中接收到了一个给页面添加水印的需求,在网上看到了各种各样的写法,但是感觉写的都比较啰嗦或者复杂,就想着自己写个组件,可以在以后得工作中经常用到,目前是使用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>
在需要使用的页面引入上面的组件即可实现水印的功能。