<template>
|
<PageWrapper title="水印示例">
|
<CollapseContainer class="w-full h-32 bg-white rounded-md" title="Global WaterMark">
|
<a-button type="primary" class="mr-2" @click="setWatermark('WaterMark Info1')">
|
Create Watermark1
|
</a-button>
|
<a-button type="primary" class="mr-2" @click="setWatermark2('WaterMark Info2')">
|
Create Watermark2
|
</a-button>
|
<a-button type="primary" class="mr-2" @click="setWatermark3('Custome Style WaterMark')">
|
Create custom style Watermark
|
</a-button>
|
<a-button color="error" class="mr-2" @click="clear"> Clear Watermark1 </a-button>
|
<a-button color="error" class="mr-2" @click="clearAll"> ClearAll </a-button>
|
<a-button color="warning" class="mr-2" @click="setWatermark('WaterMark Info New')">
|
Update Watermark1
|
</a-button>
|
</CollapseContainer>
|
</PageWrapper>
|
</template>
|
<script lang="ts" setup>
|
import { onUnmounted, ref } from 'vue';
|
import { CollapseContainer } from '@/components/Container';
|
import { useWatermark } from '@/hooks/web/useWatermark';
|
import { PageWrapper } from '@/components/Page';
|
|
const app = ref(document.body);
|
|
const { setWatermark, clear, clearAll } = useWatermark();
|
const { setWatermark: setWatermark2 } = useWatermark();
|
const { setWatermark: setWatermark3 } = useWatermark(app, {
|
fontColor: 'red',
|
fontSize: 12,
|
rotate: 30,
|
});
|
|
onUnmounted(() => {
|
clearAll();
|
});
|
</script>
|
