vue实现水印

文件名

Watermark.vue

文件内容

<template><j-modal:title="title":width="width":visible="visible"switchFullscreen @ok="handleOk":okButtonProps="{ class:{'jee-hidden': disableSubmit} }"@cancel="handleCancel"cancelText="关闭"><mes-sale-form ref="realForm"@ok="submitCallback":disabled="disableSubmit"></mes-sale-form></j-modal></template><script>importMesSaleFormfrom'./MesSaleForm'exportdefault{name:'MesSaleModal',components:{MesSaleForm},data(){return{title:'',width:'90%',visible:false,disableSubmit:false}},methods:{add(){this.visible=truethis.$nextTick(()=>{this.$refs.realForm.add();})},edit(record){this.visible=truethis.$nextTick(()=>{this.$refs.realForm.edit(record);})},close(){this.$emit('close');this.visible=false;},handleOk(){this.$refs.realForm.handleOk();},submitCallback(){this.$emit('ok');this.visible=false;},handleCancel(){this.close()}}}</script>

父组件引用

<Watermark:text="watermarkText":opacity="0.3":fontSize="20":rotate="0"/>importWatermarkfrom'./Watermark.vue';components:{Watermark},