element-plus水印使用
时间: 2023-11-15 13:57:14 浏览: 220
element-plus 提供了一个 Watermark 组件来实现水印效果。使用方法如下:
1. 安装 element-plus:
```
npm install element-plus --save
```
2. 在需要使用水印的组件中引入 Watermark 组件:
```vue
<template>
<div>
<watermark :options="options">
<!-- 这里是需要添加水印的内容 -->
<div>这里是需要添加水印的内容</div>
</watermark>
</div>
</template>
<script>
import { Watermark } from 'element-plus';
export default {
components: {
Watermark,
},
data() {
return {
options: {
// 水印文字
text: 'Watermark',
// 水印文字颜色
textColor: '#000000',
// 水印文字字体大小
textSize: 16,
// 水印文字倾斜角度
textAngle: -30,
// 水印透明度
alpha: 0.1,
// 水印间距
space: 100,
},
};
},
};
</script>
```