Mauve
122 lines
3.2 KiB
Vue
122 lines
3.2 KiB
Vue
<template>
|
||
<view v-if="showWatermark" class="watermark-container">
|
||
<view class="watermark-row" v-for="(row, rowIndex) in watermarkRows" :key="'row-' + rowIndex">
|
||
<text
|
||
class="watermark-text"
|
||
v-for="(col, colIndex) in watermarkCols"
|
||
:key="'col-' + colIndex"
|
||
:style="getWatermarkStyle(rowIndex, colIndex)"
|
||
>
|
||
{{ watermarkContent }}
|
||
</text>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: 'SimpleWatermark',
|
||
data() {
|
||
return {
|
||
showWatermark: false,
|
||
watermarkContent: '',
|
||
watermarkRows: 8, // 竖直方向显示8行
|
||
watermarkCols: 2 // 水平方向显示2列
|
||
}
|
||
},
|
||
methods: {
|
||
getWatermarkStyle(rowIndex, colIndex) {
|
||
// 计算每个水印的位置
|
||
const rowSpacing = 100; // 行间距（px）
|
||
const colSpacing = 50; // 列间距（%）
|
||
|
||
return {
|
||
position: 'absolute',
|
||
top: (rowIndex * rowSpacing + 50) + 'px',
|
||
left: (colIndex * colSpacing + 25) + '%',
|
||
transform: 'translate(-50%, -50%) rotate(-45deg)',
|
||
color: 'rgba(0, 0, 0, 0.1)',
|
||
backgroundColor: 'transparent',
|
||
fontSize: '18px',
|
||
fontWeight: 'bold',
|
||
opacity: '0.6',
|
||
padding: '8px 16px',
|
||
whiteSpace: 'nowrap',
|
||
pointerEvents: 'none',
|
||
userSelect: 'none'
|
||
}
|
||
}
|
||
},
|
||
created() {
|
||
console.log('[SimpleWatermark] Component created');
|
||
console.log('[SimpleWatermark] uni object available:', typeof uni !== 'undefined');
|
||
|
||
// 立即注册事件监听器
|
||
console.log('[SimpleWatermark] Registering event listeners immediately');
|
||
|
||
// 监听显示水印事件
|
||
uni.$on('watermark-show', (content) => {
|
||
console.log('[SimpleWatermark] Received watermark-show event with content:', content);
|
||
this.watermarkContent = content;
|
||
this.showWatermark = true;
|
||
console.log('[SimpleWatermark] Watermark state updated - show:', this.showWatermark, 'content:', this.watermarkContent);
|
||
});
|
||
|
||
// 监听隐藏水印事件
|
||
uni.$on('watermark-hide', () => {
|
||
console.log('[SimpleWatermark] Received watermark-hide event');
|
||
this.showWatermark = false;
|
||
this.watermarkContent = '';
|
||
});
|
||
|
||
console.log('[SimpleWatermark] Event listeners registered successfully');
|
||
|
||
// 使用 nextTick 确保DOM完全渲染后再检查水印状态
|
||
this.$nextTick(() => {
|
||
// 延迟检查当前页面是否需要显示水印
|
||
setTimeout(() => {
|
||
console.log('[SimpleWatermark] Checking current page watermark status');
|
||
const watermarkStore = require('@/store/watermark.js');
|
||
if (watermarkStore && watermarkStore.updateWatermark) {
|
||
console.log('[SimpleWatermark] Triggering watermark update to sync current state');
|
||
watermarkStore.updateWatermark(true);
|
||
}
|
||
}, 200);
|
||
});
|
||
},
|
||
beforeDestroy() {
|
||
// 移除事件监听
|
||
uni.$off('watermark-show');
|
||
uni.$off('watermark-hide');
|
||
console.log('[SimpleWatermark] Event listeners removed');
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.watermark-container {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
pointer-events: none;
|
||
z-index: 9999;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.watermark-row {
|
||
position: relative;
|
||
width: 100%;
|
||
height: 100px;
|
||
}
|
||
|
||
.watermark-text {
|
||
position: absolute;
|
||
white-space: nowrap;
|
||
user-select: none;
|
||
-webkit-user-select: none;
|
||
-moz-user-select: none;
|
||
-ms-user-select: none;
|
||
}
|
||
</style> |