vben
2021-02-17 4d7001bbcf3ff6e62deb967cb1c15b443b8aaff4
提交 | 用户 | age
2f6253 1 <template>
31ff05 2   <PageWrapper title="水印示例">
4d7001 3     <CollapseContainer class="w-full h-32 bg-white rounded-md" title="Global WaterMark">
2f6253 4       <a-button type="primary" class="mr-2" @click="setWatermark('WaterMark Info')">
5         Create
6       </a-button>
9edc28 7       <a-button color="error" class="mr-2" @click="clear"> Clear </a-button>
2f6253 8       <a-button color="warning" class="mr-2" @click="setWatermark('WaterMark Info New')">
9         Reset
10       </a-button>
11     </CollapseContainer>
31ff05 12   </PageWrapper>
2f6253 13 </template>
14 <script lang="ts">
15   import { defineComponent, ref } from 'vue';
16   import { CollapseContainer } from '/@/components/Container/index';
17   import { useWatermark } from '/@/hooks/web/useWatermark';
31ff05 18   import { PageWrapper } from '/@/components/Page';
2f6253 19
20   export default defineComponent({
31ff05 21     components: { CollapseContainer, PageWrapper },
2f6253 22     setup() {
23       const areaRef = ref<Nullable<HTMLElement>>(null);
24       const { setWatermark, clear } = useWatermark();
25       return {
26         setWatermark,
27         clear,
28         areaRef,
29       };
30     },
31   });
32 </script>