更新记录

1.0.1（2024-04-28）

2024/04/28

更新

1.0.0（2024-04-27）

2024年4月27日初次发布

• 只测试了，h5、微信小程序、PC-Safari、PC-Chrome等，其他平台未做测试。

平台兼容性

<template>
    <view class="">
        <WaterMark :options="options" />
    </view>
</template>
<script setup>
import { ref } from 'vue'
import WaterMark from '@/components/WEPiYang-waterMark/WEPiYang-waterMark.vue'
const time = new Date()
const year = time.getFullYear()
const month = time.getMonth() + 1 > 10 ? time.getMonth() + 1 : '0' + time.getMonth()
const day = time.getDate() + 1 > 10 ? time.getDate() + 1 : '0' + time.getDate()
const hours = time.getHours()
const minutes = time.getMinutes() + 1 > 10 ? time.getMinutes() + 1 : '0' + time.getMinutes()
const seconds = time.getSeconds() + 1 > 10 ? time.getSeconds() + 1 : '0' + time.getSeconds()
const date = year + '/' + month + '/' + day + ' ' + hours + ':' + minutes + ':' + seconds
const options = ref({
    mark: [ // 水印内容，可以设置多个水印文案
        {
            // type: 'text', // 水印类型，默认为text，可不写，后期可能加图案类型
            text: 'WEPIYang ' + date, // 文案，默认文案：水印内容
            x: -150, // 水印x轴方向位置
            y: 230 ,// 水印x轴方向位置
            rotate: -(40*(Math.PI/180)), // 文字倾斜角度
            size: 24, // 字体大小，默认大小24
            color: 'blue', //  文字颜色，默认#ccc
            globalAlpha: 0.2 // 透明度,默认0.2
        },
        {
            type: 'text',
            text: date,
            x: -100,
            y: 200,
            rotate: -(0*(Math.PI/180)),
            size: 24,
            color: 'green',
            globalAlpha: 0.2
        }
    ],
    canvasStyle:{ // 画布样式
        width: '150px',
        height: '150px',
    },
    zIndex: 99, // 水印层级
})
</script>