更新记录

1.0.0（2024-12-19） 下载此版本

✨ 新功能

• 支持单个水印和平铺水印
• 可自定义水印文字和样式（大小、角度、透明度）
• 可设置水印位置（居中、四角）
• 支持预览模式
• 支持异步操作和事件回调
• 兼容 Vue2/Vue3
• 适配 H5/微信小程序/APP

平台兼容性

lkl-watermark 图片水印组件

一个简单易用的图片水印组件，支持单个和平铺水印模式。

特性

• 支持单个水印和平铺水印
• 可自定义水印文字和样式（大小、角度、透明度）
• 可设置水印位置（居中、四角）
• 支持预览模式
• 支持异步操作和事件回调
• 兼容 Vue2/Vue3
• 适配 H5/微信小程序/APP

安装

在插件市场中搜索 lkl-watermark 或直接导入插件。

使用方法

基础用法

<template>
  <lkl-watermark :src="imageUrl" :options="watermarkOptions">
  </lkl-watermark>
</template>

<script>
export default {
  data() {
    return {
      imageUrl: '/static/demo.jpg',
      watermarkOptions: {
        text: 'LKL-UI',
        rotate: -30,
        fontSize: 110,
        opacity: 0.5,
        mode: 'single',
        position: 'center'
      }
    }
  }
}
</script>

平铺水印

<template>
  <lkl-watermark :src="imageUrl" :options="watermarkOptions">
  </lkl-watermark>
</template>

<script>
export default {
  data() {
    return {
      imageUrl: '/static/demo.jpg',
      watermarkOptions: {
        text: 'LKL-UI',
        rotate: -30,
        fontSize: 110,
        opacity: 0.5,
        mode: 'tile',
        gap: [150, 150]
      }
    }
  }
}
</script>

API

Props

Options 配置项

Events

示例

<template>
  <lkl-watermark
    :src="imageUrl"
    :options="watermarkOptions"
    @success="onSuccess"
    @error="onError"
  >
  </lkl-watermark>
</template>

<script>
export default {
  data() {
    return {
      imageUrl: '/static/demo.jpg',
      watermarkOptions: {
        text: 'LKL-UI',
        rotate: -30,
        fontSize: 110,
        opacity: 0.5,
        mode: 'single',
        position: 'center'
      }
    }
  },
  methods: {
    onSuccess() {
      console.log('水印生成成功')
    },
    onError(error) {
      console.error('水印生成失败：', error)
    }
  }
}
</script>

注意事项

1. 水印位置选项仅在单个水印模式下可用
2. 水印间距选项仅在平铺模式下可用
3. 默认使用黑色文字