自定义组件

水印组件

基础用法

水印组件的基础用法

<template>
	<div>
		<el-button type="primary" @click="open">打开水印</el-button>
		<WaterMark v-if="isOpen" ref="waterRef" text="测试水印" color="rgba(55, 109, 246,0.3)" font-size="14" />
	</div>
</template>

<script setup>
import WaterMark from '../../components/custom/WaterMark.vue';
import { ref, nextTick } from 'vue';

const waterRef = ref(null);
const isOpen = ref(false);

const open = () => {
	isOpen.value = true;
	nextTick(() => {
		waterRef.value.openWaterMark();
	});
};
</script>

<route lang="json5">
	{
		meta:{
			title: '水印',
			order: 1
		},
	}
</route>