更新记录

1.0.7(2023-02-21) 下载此版本

适配了vue3版本

1.0.6(2023-02-20) 下载此版本

更新了一部分细节

1.0.5(2023-02-20) 下载此版本

新增了x,y轴偏移配置

查看更多

平台兼容性

Vue2 Vue3
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
HBuilderX 3.1.0 × × × × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari

tyz-watermark 水印组件

1.使用示例

<template>
    <view>
        <tyzWatermark content="我是新的水印" :rotate="20" :x-offset="20" :font-size="10" :font-weight="600">
            <view class="demo-class">
                <image class="logo" src="/static/logo.png"></image>
            </view>
        </tyzWatermark>
        <tyzWatermark :image="img"
                      :image-width="32"
                      :image-height="32"
                      :x-offset="12"
                      :y-offset="0"
                      :image-opacity="0.2"
        >
            <view class="demo-class1">
                <image class="logo" src="/static/logo.png"></image>
            </view>
        </tyzWatermark>
    </view>
</template>

API

Watermark Props

名称 类型 默认参数 说明
content string 水印 水印文字内容
fontStyle string normal 字体风格
fontVariant string undefind 字型
fontSize Number 14 字体大小
lineHeight Number 14 行高
fontFamily string undefined 字体族
fontColor string rgba(128, 128, 128, .3) 字体颜色
fontWeight Number 400 字体粗细
rotate Number -15 旋转角度
image String undefined 图片路径
imageOpacity Number 1 图片不透明度
imageHeight Number undefined 图片高度
imageWidth Number undefined 图片宽度
yOffset Number 0 y轴偏移
xOffset Number 0 x轴偏移

Watermark Slots

名称 类型 说明
content () 水印覆盖的内容

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

插件不采集任何数据

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问