Watermark 水印 在页面上添加文本或图片等水印信息
基础用法 最简单的用法。
vue
隐藏源代码多行水印 使用 content设置一个字符串数组来指定多行文本水印内容
vue
隐藏源代码图片水印 通过 image 指定图像地址。 为了确保图像清晰展示而不是被拉伸，请设置宽度和高度，建议使用至少两倍的宽度和高度的图片来保证显示效果。
vue
:width="130" :height="30" image="https://element-plus.org/images/element-plus-logo.svg" >
隐藏源代码自定义配置 配置自定义参数预览水印效果。
Element PlusA Vue 3 based component library for designers and developersContentColorFontSizezIndexRotateGapOffsetvue
class="watermark" :content="config.content" :font="config.font" :z-index="config.zIndex" :rotate="config.rotate" :gap="config.gap" :offset="config.offset" >Element Plus
A Vue 3 based component library for designers and developers
class="form" :model="config" label-position="top" label-width="50px" > v-model="config.offset[0]" placeholder="offsetLeft" controls-position="right" /> v-model="config.offset[1]" placeholder="offsetTop" controls-position="right" />
隐藏源代码API 属性 属性名描述类型默认值width水印的宽度， content 的默认值是它自己的宽度number120height水印的高度， content 的默认值是它自己的高度number64rotate水印的旋转角度, 单位 °number-22z-index水印元素的z-index值number9image水印图片，建议使用 2x 或 3x 图像string—content水印文本内容string/arrayElement Plusfont文字样式Font字体gap水印之间的间距array[100, 100]offset水印从容器左上角的偏移 默认值为 gap/2array[gap[0]/2, gap[1]/2]Font 名称详情类型默认color字体颜色stringrgba(0,0,0,.15)fontSize字体大小number / string16fontWeight字重enumnormalfontFamily字体stringsans-seriffontGap 2.11.5字体间隙number3fontStyle字体样式enumnormaltextAlign文本对齐enumcentertextBaseline文本基线enumhangingSlots 名称详情默认添加水印的容器源代码 组件 • 文档
贡献者