vue ant 写一段代码 给一个model加水印
时间: 2024-02-18 22:00:20 浏览: 25
好的,以下是一段使用 Vue 和 Ant Design 组件库编写的给图片添加水印的代码示例:
```html
<template>
<div>
<a-upload
:before-upload="beforeUpload"
:show-upload-list="false"
>
<a-icon type="plus" />
<div class="ant-upload-text">选择图片</div>
</a-upload>
<div v-if="imageUrl">
<img :src="imageUrl" alt="图片预览" />
<div class="watermark">{{ watermarkText }}</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
imageUrl: '',
watermarkText: '这是水印',
};
},
methods: {
beforeUpload(file) {
const reader = new FileReader();
reader.onload = (e) => {
// 将读取到的图片地址保存到 imageUrl 中
this.imageUrl = e.target.result;
};
reader.readAsDataURL(file);
return false; // 阻止上传
},
},
};
</script>
<style>
.watermark {
position: absolute;
bottom: 0;
right: 0;
padding: 10px;
font-size: 24px;
color: rgba(255, 255, 255, 0.5);
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.3);
}
</style>
```
在这个示例中,我们使用了 Ant Design 的 Upload 组件,用于上传图片。在上传图片之前,我们使用 FileReader API 将图片转换为 Data URL,以便在页面上预览。然后,我们在预览图片的下方添加了一个固定在右下角的水印文字。你可以根据自己的需求修改水印的样式和内容。