first commit
This commit is contained in:
@@ -0,0 +1,122 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user