<template>
<div class="watermark">
<div class="watermarkWrap">
<div
:style="`color:${color};transform: rotate(${rotate}deg);width:${wm_w}%;height:${wm_h}%`"
class="wm"
v-for="(i,index) in watermarkNum"
:key="index"
>{{watermarkText}}</div>
</div>
</div>
</template>
<script>
export default {
name: 'waterMark',
components: {},
data() {
return {
watermarkNum: 0, //水印数量
watermarkRow: 2, //列数
watermarkLine: 4, //行数
rotate: -20, //文字旋转角度
color: "#ccc", //文字颜色
watermarkText: "魔主恋上九尾狐", //水印文字
wm_w: 50,//水印宽度百分比
wm_h: 20 //水印高度百分比
}
},
created() {
},
mounted(){
this.setWatermark();
},
computed: {},
watch: {},
methods: {
//创建水印
setWatermark() {
let that = this;
that.watermarkNum = that.watermarkRow * that.watermarkLine; //总水印数 = 行数 x 列数
that.wm_w = 100 / that.watermarkRow;
that.wm_h = 100 / that.watermarkLine;
}
}
}
</script>
<style lang="scss" scoped>
.watermark {
.watermarkWrap{
overflow: hidden;
position: fixed;
width: 100%;
height: 100%;
left: 0;
top: 0;
pointer-events: none;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.wm {
display: flex;
justify-content: center;
align-items: center;
}
}
</style>
