2025-02-21 10:19:20 +08:00

66 lines
2.2 KiB
Vue

<template>
<div class="layout-wrap" ref="watermarkContainer">
<!-- <LayoutHeader /> -->
<MediationRoom />
</div>
</template>
<script>
import watermark from 'watermark-dom';
export default {
components: {
// LayoutHeader: () => import('@/pages/layout/components/LayoutHeader'),
// LayoutContent: () => import('./components/LayoutContent.vue'),
MediationRoom: () => import('./components/MediationRoom.vue'),
},
data() {
return {
};
},
async created() {
this.addWatermark()
},
methods: {
addWatermark() {
let userInfo = JSON.parse(sessionStorage.getItem('userInfo'))
let watermark_txt = userInfo.realName + ' '+ userInfo.phone
let options = {
watermark_parent_node: this.$refs.watermarkContainer,
// 水印内容
watermark_txt: watermark_txt,
// 水印起始位置x轴坐标
watermark_x: 20,
// 水印起始位置Y轴坐标
watermark_y: 20,
// 水印行数
watermark_rows: 5,
// 水印列数
watermark_cols: 10,
// 水印x轴间隔
watermark_x_space: 150,
// 水印y轴间隔
watermark_y_space: 150,
// 水印字体颜色
watermark_color: '#aaa',
// 水印透明度
watermark_alpha: 0.2,
// 水印字体大小
watermark_fontsize: '15px',
// 水印字体
watermark_font: '微软雅黑',
// 水印宽度
watermark_width: 210,
// 水印长度
watermark_height: 80,
// 水印倾斜度数
watermark_angle: 15
}
watermark.load(options);
},
}
};
</script>
<style lang="scss">
</style>