在vue项目中用vue-watermark快捷开发屏幕水印效果

我们先引入一个第三方依赖

npm install vue-watermark

然后 因为这只是个测试工具 我就直接代码写 App.vue里啦
参考代码如下

<template><div><vue-watermark :text="watermarkText"></vue-watermark><!-- 正常的页面内容 --></div>
</template><script>
import VueWatermark from 'vue-watermark';export default {name: 'WatermarkDemo',components: {VueWatermark},data() {return {watermarkText: '水印文字'};}
};
</script>

然后 我们启动项目 屏幕效果就会变成这样

这个水印文字 大家可以根据需要去改 非常的快捷方便