更新记录

1.2.1（2024-05-20）

新增第三种水印样式

1.1.0（2024-05-19）

新增第二种水印样式 修改展示图

1.0.1（2024-05-18）

• 新增内容自适应
• 设置组件扩展入口，方便后续扩展
• 修复已知bug

平台兼容性

mask-lly 水印组件

安装

直接在插件市场购买安装

使用

<mask-lly ref="masklly">
<button @click="getMask">完成</button><!-- 自定义插槽 -->
</mask-lly>

onReady() { // 必须在onReady中使用  或者确定页面挂在完成后调用
    // 打开弹窗
    this.$refs.masklly.open({
        url:"https://img0.baidu.com/it/u=1116044439,3598757562&fm=253&fmt=auto&app=120&f=JPEG?w=561&h=327", // 示例路径  可以是本地路径、网络路径、临时路径，使用时自行替换
        width:'90vw', // 弹窗内容宽度 带单位 默认 730rpx
        height:'80vh', // 弹窗内容高度 带单位 默认 730rpx 
        maskClick:true // 遮罩层点击 true点击可关闭   false 点击不可关闭
        compressImage:{ // 图片压缩配置（不支持H5)
            width:'auto', // 缩放宽度 number|'auto'
            height:'auto',// 缩放随宽度缩放 number|'auto'
            compressedWidth:'auto', // 压缩后宽度 number|'auto'  建议和width保持一致
            compressedHeight:'auto', // 压缩后高度 number|'auto' 建议和height保持一致
            quality:80, //0~100  压缩质量，范围0～100，数值越小，质量越低，压缩率越高（仅对jpg有效）
        }
    })
    // 添加水印 样式一 示例在右侧图片
    this.$refs.masklly.setMask_box({ // 在open之后调用
        position:1, //水印位置 1左上 2右上 3左下 4右下 5居中
        content:['这是一条水印内容','这是可自动换行的水印内容这是可内容这是可内容这是可'], // 每行文字内容，自动换行
        lineMax:15, // 每行最多文字数，超过自动换行 , 默认 15
        color:'red', // 文字颜色  支持16进制  rgb rgba
        lineHeight:20, // 行高
        feedPadding:24, // 文字超出后后续行缩进 可以为负数
        maskStyle:'rgba(0,0,0,0.4)', // 水印背景颜色 支持16进制  rgb rgba
        fontSize:'12px',// 带单位 px ,不穿默认为16px
        fontFamily:'auto',
        padding:12, // 内边距
    })
    // 添加水印  样式二 示例在右侧图片
    this.$refs.masklly.setMask_text({ // 在open之后调用 
        text:"lly-mask",
        fontSize:'18px',// 不支持auto
        fontFamily:'auto',
        color:'rgba(255,255,255,0.5)', // 十六进制 rgba
        densityx:4, // x轴密度 0~100 越大越密集
        densityy:4, // y轴密度 0~100 越大越密集
        rotate:0.5, // 文字旋转角度 -1 ~ 1
    })

    // 添加水印  样式三 示例在右侧图片
    this.$refs.masklly.setMask_img({
        path:"../../static/zz.png", // 覆盖图路径 本地 临时 网络
        width:120, // 缩放宽度 number  // 自定义覆盖图宽度
        height:100, // 缩放高度 bnumber  // 自定义图片高度
        x:0, // x轴位置 0-1 原点左上角
        y:0.84, // y轴位置 0-1 原点左上角
    })
},
methods: {
        async getMask(){
            // 获取水印图片
            let res = await this.$refs.masklly.getMask()
        }
}

注意

水印样式可叠加使用 水印样式 方向 大小 背景 透明度等支持自定义