65 lines
1.4 KiB
Vue
65 lines
1.4 KiB
Vue
<!-- 水印组件 -->
|
|
<template>
|
|
<div
|
|
v-if="watermarkVisible"
|
|
class="fixed left-0 top-0 h-screen w-screen pointer-events-none"
|
|
:style="{ zIndex: zIndex }"
|
|
>
|
|
<ElWatermark
|
|
:content="content"
|
|
:font="{ fontSize: fontSize, color: fontColor }"
|
|
:rotate="rotate"
|
|
:gap="[gapX, gapY]"
|
|
:offset="[offsetX, offsetY]"
|
|
>
|
|
<div style="height: 100vh"></div>
|
|
</ElWatermark>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import AppConfig from '@/config'
|
|
import { useSettingStore } from '@/store/modules/setting'
|
|
|
|
defineOptions({ name: 'ArtWatermark' })
|
|
|
|
const settingStore = useSettingStore()
|
|
const { watermarkVisible } = storeToRefs(settingStore)
|
|
|
|
interface WatermarkProps {
|
|
/** 水印内容 */
|
|
content?: string
|
|
/** 水印是否可见 */
|
|
visible?: boolean
|
|
/** 水印字体大小 */
|
|
fontSize?: number
|
|
/** 水印字体颜色 */
|
|
fontColor?: string
|
|
/** 水印旋转角度 */
|
|
rotate?: number
|
|
/** 水印间距X */
|
|
gapX?: number
|
|
/** 水印间距Y */
|
|
gapY?: number
|
|
/** 水印偏移X */
|
|
offsetX?: number
|
|
/** 水印偏移Y */
|
|
offsetY?: number
|
|
/** 水印层级 */
|
|
zIndex?: number
|
|
}
|
|
|
|
withDefaults(defineProps<WatermarkProps>(), {
|
|
content: AppConfig.systemInfo.name,
|
|
visible: false,
|
|
fontSize: 16,
|
|
fontColor: 'rgba(128, 128, 128, 0.2)',
|
|
rotate: -22,
|
|
gapX: 100,
|
|
gapY: 100,
|
|
offsetX: 50,
|
|
offsetY: 50,
|
|
zIndex: 3100
|
|
})
|
|
</script>
|