北京 响应式网站建设,长春大学,免费软件群,android下载软件前言#xff1a; 最近在工作中接收到了一个给页面添加水印的需求#xff0c;在网上看到了各种各样的写法#xff0c;但是感觉写的都比较啰嗦或者复杂#xff0c;就想着自己写个组件#xff0c;可以在以后得工作中经常用到#xff0c;目前是使用Vue技术写的#xff0c;如…前言 最近在工作中接收到了一个给页面添加水印的需求在网上看到了各种各样的写法但是感觉写的都比较啰嗦或者复杂就想着自己写个组件可以在以后得工作中经常用到目前是使用Vue技术写的如果使用了其他技术比如React可以直接把语法换成React即可。 下面是参考代码
waterMark.vue
templatediv classwaterulli v-for(item, index) in 8 :keywaterLine indexspanv-for(it, idx) in randomNumber[index]:keywaterItem index idx{{ name \n id}}/span/li/ul/div
/templatescript
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 langscss 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
在需要使用的页面引入上面的组件即可实现水印的功能。
