添加 cl-watermark 水印组件
This commit is contained in:
icssoa
@@ -323,6 +323,10 @@
|
|||||||
"签名",
|
"签名",
|
||||||
"Signature"
|
"Signature"
|
||||||
],
|
],
|
||||||
|
[
|
||||||
|
"水印",
|
||||||
|
"Watermark"
|
||||||
|
],
|
||||||
[
|
[
|
||||||
"图片裁剪",
|
"图片裁剪",
|
||||||
"Image Cropping"
|
"Image Cropping"
|
||||||
@@ -2498,5 +2502,81 @@
|
|||||||
[
|
[
|
||||||
"Calendar 日历",
|
"Calendar 日历",
|
||||||
"Calendar Calendar"
|
"Calendar Calendar"
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"这是一段需要保护的内容",
|
||||||
|
"This is content that needs to be protected"
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"水印会覆盖在内容上方，防止内容被盗用",
|
||||||
|
"Watermarks will be overlaid on the content to prevent unauthorized use"
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"可自定义的水印内容区域",
|
||||||
|
"Customizable watermark content area"
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"水印文本",
|
||||||
|
"Watermark Text"
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"字体大小",
|
||||||
|
"Font Size"
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"透明度",
|
||||||
|
"Opacity"
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"旋转角度",
|
||||||
|
"Rotation Angle"
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"水印宽度",
|
||||||
|
"Watermark Width"
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"水印高度",
|
||||||
|
"Watermark Height"
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"水平间距",
|
||||||
|
"Horizontal Spacing"
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"垂直间距",
|
||||||
|
"Vertical Spacing"
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"字体粗细",
|
||||||
|
"Font Weight"
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"正常",
|
||||||
|
"Normal"
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"加粗",
|
||||||
|
"Bold"
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"多行文本水印",
|
||||||
|
"Multi-line Text Watermark"
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"重要文档",
|
||||||
|
"Important Document"
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"这是一份重要的文档内容，需要添加水印保护。",
|
||||||
|
"This is an important document that requires watermark protection."
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"水印可以防止内容被未授权的复制和传播。",
|
||||||
|
"Watermarks can prevent unauthorized copying and distribution of content."
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"图片保护",
|
||||||
|
"Image Protection"
|
||||||
]
|
]
|
||||||
]
|
]
|
||||||
@@ -723,6 +723,10 @@
|
|||||||
"签名",
|
"签名",
|
||||||
""
|
""
|
||||||
],
|
],
|
||||||
|
[
|
||||||
|
"水印",
|
||||||
|
""
|
||||||
|
],
|
||||||
[
|
[
|
||||||
"图片裁剪",
|
"图片裁剪",
|
||||||
""
|
""
|
||||||
@@ -2498,5 +2502,81 @@
|
|||||||
[
|
[
|
||||||
"我的",
|
"我的",
|
||||||
""
|
""
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"这是一段需要保护的内容",
|
||||||
|
""
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"水印会覆盖在内容上方，防止内容被盗用",
|
||||||
|
""
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"可自定义的水印内容区域",
|
||||||
|
""
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"水印文本",
|
||||||
|
""
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"字体大小",
|
||||||
|
""
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"透明度",
|
||||||
|
""
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"旋转角度",
|
||||||
|
""
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"水印宽度",
|
||||||
|
""
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"水印高度",
|
||||||
|
""
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"水平间距",
|
||||||
|
""
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"垂直间距",
|
||||||
|
""
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"字体粗细",
|
||||||
|
""
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"正常",
|
||||||
|
""
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"加粗",
|
||||||
|
""
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"多行文本水印",
|
||||||
|
""
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"重要文档",
|
||||||
|
""
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"这是一份重要的文档内容，需要添加水印保护。",
|
||||||
|
""
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"水印可以防止内容被未授权的复制和传播。",
|
||||||
|
""
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"图片保护",
|
||||||
|
""
|
||||||
]
|
]
|
||||||
]
|
]
|
||||||
@@ -448,6 +448,12 @@
|
|||||||
"navigationBarTitleText": "Sign 签名"
|
"navigationBarTitleText": "Sign 签名"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
"path": "other/watermark",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "Watermark 水印"
|
||||||
|
}
|
||||||
|
},
|
||||||
{
|
{
|
||||||
"path": "other/day-uts",
|
"path": "other/day-uts",
|
||||||
"style": {
|
"style": {
|
||||||
|
|||||||
147
pages/demo/other/watermark.uvue
Normal file
147
pages/demo/other/watermark.uvue
Normal file
@@ -0,0 +1,147 @@
|
|||||||
|
<template>
|
||||||
|
<cl-page>
|
||||||
|
<view class="p-3">
|
||||||
|
<demo-item :label="t('自定义样式')">
|
||||||
|
<view class="flex">
|
||||||
|
<cl-watermark
|
||||||
|
:text="customText"
|
||||||
|
:font-size="fontSize"
|
||||||
|
:color="color"
|
||||||
|
:dark-color="darkColor"
|
||||||
|
:opacity="opacity"
|
||||||
|
:rotate="rotate"
|
||||||
|
:width="width"
|
||||||
|
:height="height"
|
||||||
|
:gap-x="gapX"
|
||||||
|
:gap-y="gapY"
|
||||||
|
:font-weight="fontWeight"
|
||||||
|
>
|
||||||
|
<view
|
||||||
|
class="flex flex-col p-4 rounded-xl bg-surface-50 dark:bg-surface-800 h-[400rpx]"
|
||||||
|
>
|
||||||
|
<cl-text>
|
||||||
|
明月几时有？把酒问青天。 不知天上宫阙，今夕是何年。
|
||||||
|
我欲乘风归去，又恐琼楼玉宇，高处不胜寒。 起舞弄清影，何似在人间。
|
||||||
|
</cl-text>
|
||||||
|
</view>
|
||||||
|
</cl-watermark>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<cl-list border class="mt-3">
|
||||||
|
<cl-list-item :label="t('水印文本')">
|
||||||
|
<cl-input
|
||||||
|
v-model="customText"
|
||||||
|
placeholder="请输入水印文本"
|
||||||
|
:pt="{ className: 'w-[300rpx]' }"
|
||||||
|
/>
|
||||||
|
</cl-list-item>
|
||||||
|
|
||||||
|
<cl-list-item :label="t('字体大小')">
|
||||||
|
<view class="w-[300rpx]">
|
||||||
|
<cl-slider v-model="fontSize" :min="12" :max="32" :step="1"></cl-slider>
|
||||||
|
</view>
|
||||||
|
</cl-list-item>
|
||||||
|
|
||||||
|
<!-- #ifndef APP -->
|
||||||
|
<cl-list-item :label="t('透明度')">
|
||||||
|
<view class="w-[300rpx]">
|
||||||
|
<cl-slider
|
||||||
|
v-model="opacity"
|
||||||
|
:min="0.1"
|
||||||
|
:max="1"
|
||||||
|
:step="0.05"
|
||||||
|
></cl-slider>
|
||||||
|
</view>
|
||||||
|
</cl-list-item>
|
||||||
|
<!-- #endif -->
|
||||||
|
|
||||||
|
<cl-list-item :label="t('旋转角度')">
|
||||||
|
<view class="w-[300rpx]">
|
||||||
|
<cl-slider
|
||||||
|
v-model="rotate"
|
||||||
|
:min="-180"
|
||||||
|
:max="180"
|
||||||
|
:step="5"
|
||||||
|
></cl-slider>
|
||||||
|
</view>
|
||||||
|
</cl-list-item>
|
||||||
|
|
||||||
|
<cl-list-item :label="t('水印宽度')">
|
||||||
|
<view class="w-[300rpx]">
|
||||||
|
<cl-slider v-model="width" :min="80" :max="300" :step="10"></cl-slider>
|
||||||
|
</view>
|
||||||
|
</cl-list-item>
|
||||||
|
|
||||||
|
<cl-list-item :label="t('水印高度')">
|
||||||
|
<view class="w-[300rpx]">
|
||||||
|
<cl-slider v-model="height" :min="40" :max="200" :step="10"></cl-slider>
|
||||||
|
</view>
|
||||||
|
</cl-list-item>
|
||||||
|
|
||||||
|
<cl-list-item :label="t('水平间距')">
|
||||||
|
<view class="w-[300rpx]">
|
||||||
|
<cl-slider v-model="gapX" :min="20" :max="200" :step="10"></cl-slider>
|
||||||
|
</view>
|
||||||
|
</cl-list-item>
|
||||||
|
|
||||||
|
<cl-list-item :label="t('垂直间距')">
|
||||||
|
<view class="w-[300rpx]">
|
||||||
|
<cl-slider v-model="gapY" :min="20" :max="200" :step="10"></cl-slider>
|
||||||
|
</view>
|
||||||
|
</cl-list-item>
|
||||||
|
|
||||||
|
<cl-list-item :label="t('字体粗细')">
|
||||||
|
<cl-tabs
|
||||||
|
v-model="fontWeight"
|
||||||
|
:list="fontWeightList"
|
||||||
|
:height="60"
|
||||||
|
show-slider
|
||||||
|
></cl-tabs>
|
||||||
|
</cl-list-item>
|
||||||
|
</cl-list>
|
||||||
|
</demo-item>
|
||||||
|
|
||||||
|
<demo-item :label="t('图片保护')">
|
||||||
|
<view class="flex">
|
||||||
|
<cl-watermark text="© Cool UI" :width="200" :height="80" :opacity="0.9">
|
||||||
|
<image
|
||||||
|
src="https://unix.cool-js.com/images/demo/avatar.jpg"
|
||||||
|
mode="aspectFit"
|
||||||
|
class="w-full"
|
||||||
|
></image>
|
||||||
|
</cl-watermark>
|
||||||
|
</view>
|
||||||
|
</demo-item>
|
||||||
|
</view>
|
||||||
|
</cl-page>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import DemoItem from "../components/item.uvue";
|
||||||
|
import { ref } from "vue";
|
||||||
|
import { t } from "@/locale";
|
||||||
|
import type { ClTabsItem } from "@/uni_modules/cool-ui";
|
||||||
|
|
||||||
|
const customText = ref("Cool UI");
|
||||||
|
const fontSize = ref(16);
|
||||||
|
const color = ref("rgba(0, 0, 0, 0.15)");
|
||||||
|
const darkColor = ref("rgba(255, 255, 255, 0.15)");
|
||||||
|
const opacity = ref(1);
|
||||||
|
const rotate = ref(-22);
|
||||||
|
const width = ref(120);
|
||||||
|
const height = ref(64);
|
||||||
|
const gapX = ref(100);
|
||||||
|
const gapY = ref(100);
|
||||||
|
const fontWeight = ref("normal");
|
||||||
|
|
||||||
|
const fontWeightList = [
|
||||||
|
{
|
||||||
|
label: t("正常"),
|
||||||
|
value: "normal"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: t("加粗"),
|
||||||
|
value: "bold"
|
||||||
|
}
|
||||||
|
] as ClTabsItem[];
|
||||||
|
</script>
|
||||||
@@ -421,6 +421,11 @@ const data = computed<Item[]>(() => {
|
|||||||
icon: "sketching",
|
icon: "sketching",
|
||||||
path: "/pages/demo/other/sign"
|
path: "/pages/demo/other/sign"
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
label: t("水印"),
|
||||||
|
icon: "copyright-line",
|
||||||
|
path: "/pages/demo/other/watermark"
|
||||||
|
},
|
||||||
{
|
{
|
||||||
label: t("图片裁剪"),
|
label: t("图片裁剪"),
|
||||||
icon: "crop-line",
|
icon: "crop-line",
|
||||||
|
|||||||
277
uni_modules/cool-ui/components/cl-watermark/cl-watermark.uvue
Normal file
277
uni_modules/cool-ui/components/cl-watermark/cl-watermark.uvue
Normal file
@@ -0,0 +1,277 @@
|
|||||||
|
<template>
|
||||||
|
<view class="cl-watermark" :class="[pt.className]">
|
||||||
|
<view class="cl-watermark__content" :class="[pt.container?.className]">
|
||||||
|
<slot></slot>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<canvas
|
||||||
|
ref="canvasRef"
|
||||||
|
type="2d"
|
||||||
|
:canvas-id="canvasId"
|
||||||
|
:id="canvasId"
|
||||||
|
class="cl-watermark__canvas"
|
||||||
|
:style="{
|
||||||
|
width: containerWidth + 'px',
|
||||||
|
height: containerHeight + 'px',
|
||||||
|
zIndex
|
||||||
|
}"
|
||||||
|
></canvas>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import {
|
||||||
|
ref,
|
||||||
|
computed,
|
||||||
|
onMounted,
|
||||||
|
watch,
|
||||||
|
getCurrentInstance,
|
||||||
|
nextTick,
|
||||||
|
shallowRef,
|
||||||
|
onUnmounted
|
||||||
|
} from "vue";
|
||||||
|
import { getDevicePixelRatio, isDark, parsePt, uuid } from "@/cool";
|
||||||
|
import type { PassThroughProps } from "../../types";
|
||||||
|
|
||||||
|
defineOptions({
|
||||||
|
name: "cl-watermark"
|
||||||
|
});
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
// 透传样式
|
||||||
|
pt: {
|
||||||
|
type: Object,
|
||||||
|
default: () => ({})
|
||||||
|
},
|
||||||
|
// 水印文本
|
||||||
|
text: {
|
||||||
|
type: String,
|
||||||
|
default: "Watermark"
|
||||||
|
},
|
||||||
|
// 水印字体大小
|
||||||
|
fontSize: {
|
||||||
|
type: Number,
|
||||||
|
default: 16
|
||||||
|
},
|
||||||
|
// 水印文字颜色(浅色模式)
|
||||||
|
color: {
|
||||||
|
type: String,
|
||||||
|
default: "rgba(0, 0, 0, 0.15)"
|
||||||
|
},
|
||||||
|
// 水印文字颜色(深色模式)
|
||||||
|
darkColor: {
|
||||||
|
type: String,
|
||||||
|
default: "rgba(255, 255, 255, 0.15)"
|
||||||
|
},
|
||||||
|
// 水印透明度
|
||||||
|
opacity: {
|
||||||
|
type: Number,
|
||||||
|
default: 1
|
||||||
|
},
|
||||||
|
// 水印旋转角度
|
||||||
|
rotate: {
|
||||||
|
type: Number,
|
||||||
|
default: -22
|
||||||
|
},
|
||||||
|
// 水印宽度
|
||||||
|
width: {
|
||||||
|
type: Number,
|
||||||
|
default: 120
|
||||||
|
},
|
||||||
|
// 水印高度
|
||||||
|
height: {
|
||||||
|
type: Number,
|
||||||
|
default: 64
|
||||||
|
},
|
||||||
|
// 水印之间的水平间距
|
||||||
|
gapX: {
|
||||||
|
type: Number,
|
||||||
|
default: 100
|
||||||
|
},
|
||||||
|
// 水印之间的垂直间距
|
||||||
|
gapY: {
|
||||||
|
type: Number,
|
||||||
|
default: 100
|
||||||
|
},
|
||||||
|
// 水印层级
|
||||||
|
zIndex: {
|
||||||
|
type: Number,
|
||||||
|
default: 9
|
||||||
|
},
|
||||||
|
// 字体粗细
|
||||||
|
fontWeight: {
|
||||||
|
type: String,
|
||||||
|
default: "normal"
|
||||||
|
},
|
||||||
|
// 字体样式
|
||||||
|
fontFamily: {
|
||||||
|
type: String,
|
||||||
|
default: "sans-serif"
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// 透传样式类型定义
|
||||||
|
type PassThrough = {
|
||||||
|
className?: string;
|
||||||
|
container?: PassThroughProps;
|
||||||
|
};
|
||||||
|
|
||||||
|
// 解析透传样式配置
|
||||||
|
const pt = computed(() => parsePt<PassThrough>(props.pt));
|
||||||
|
|
||||||
|
// 获取当前实例
|
||||||
|
const { proxy } = getCurrentInstance()!;
|
||||||
|
|
||||||
|
// 创建canvas实例
|
||||||
|
const canvasRef = shallowRef<UniElement | null>(null);
|
||||||
|
// 创建canvas ID
|
||||||
|
const canvasId = `cl-watermark-${uuid()}`;
|
||||||
|
|
||||||
|
// 容器高度
|
||||||
|
const containerWidth = ref(0);
|
||||||
|
|
||||||
|
// 容器宽度
|
||||||
|
const containerHeight = ref(0);
|
||||||
|
|
||||||
|
// 计算当前水印颜色
|
||||||
|
const currentColor = computed(() => {
|
||||||
|
if (isDark.value) {
|
||||||
|
return props.darkColor;
|
||||||
|
}
|
||||||
|
return props.color;
|
||||||
|
});
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取容器尺寸
|
||||||
|
*/
|
||||||
|
function getContainerSize(): Promise<void> {
|
||||||
|
return new Promise((resolve) => {
|
||||||
|
uni.createSelectorQuery()
|
||||||
|
.in(proxy)
|
||||||
|
.select(".cl-watermark")
|
||||||
|
.boundingClientRect((rect) => {
|
||||||
|
containerHeight.value = (rect as NodeInfo).height ?? 0;
|
||||||
|
containerWidth.value = (rect as NodeInfo).width ?? 0;
|
||||||
|
|
||||||
|
resolve();
|
||||||
|
})
|
||||||
|
.exec();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 绘制水印 - 使用Canvas
|
||||||
|
*/
|
||||||
|
async function drawWatermark() {
|
||||||
|
await nextTick();
|
||||||
|
|
||||||
|
// 获取容器尺寸
|
||||||
|
await getContainerSize();
|
||||||
|
if (containerWidth.value <= 0 || containerHeight.value <= 0) return;
|
||||||
|
|
||||||
|
uni.createCanvasContextAsync({
|
||||||
|
id: canvasId,
|
||||||
|
component: proxy,
|
||||||
|
success: (canvasContext: CanvasContext) => {
|
||||||
|
const drawCtx = canvasContext.getContext("2d")!;
|
||||||
|
|
||||||
|
// 设置canvas尺寸
|
||||||
|
drawCtx.canvas.width = containerWidth.value;
|
||||||
|
drawCtx.canvas.height = containerHeight.value;
|
||||||
|
|
||||||
|
// 清空画布
|
||||||
|
drawCtx.reset();
|
||||||
|
drawCtx.clearRect(0, 0, containerWidth.value, containerHeight.value);
|
||||||
|
|
||||||
|
// 缩放画布以适配高分屏
|
||||||
|
const ratio = getDevicePixelRatio();
|
||||||
|
drawCtx.scale(ratio, ratio);
|
||||||
|
|
||||||
|
// 设置全局透明度
|
||||||
|
drawCtx.globalAlpha = props.opacity;
|
||||||
|
|
||||||
|
// 设置字体
|
||||||
|
drawCtx.font = `${props.fontWeight} ${props.fontSize}px ${props.fontFamily}`;
|
||||||
|
drawCtx.fillStyle = currentColor.value;
|
||||||
|
drawCtx.textAlign = "center";
|
||||||
|
drawCtx.textBaseline = "middle";
|
||||||
|
|
||||||
|
// 计算水印单元的总宽高（包含间距）
|
||||||
|
const cellWidth = props.width + props.gapX;
|
||||||
|
const cellHeight = props.height + props.gapY;
|
||||||
|
|
||||||
|
// 计算需要多少行和列
|
||||||
|
const cols = Math.ceil(containerWidth.value / cellWidth) + 1;
|
||||||
|
const rows = Math.ceil(containerHeight.value / cellHeight) + 1;
|
||||||
|
|
||||||
|
// 遍历绘制水印
|
||||||
|
for (let row = 0; row < rows; row++) {
|
||||||
|
for (let col = 0; col < cols; col++) {
|
||||||
|
const x = col * cellWidth + props.width / 2;
|
||||||
|
const y = row * cellHeight + props.height / 2;
|
||||||
|
|
||||||
|
drawCtx.save();
|
||||||
|
drawCtx.translate(x, y);
|
||||||
|
drawCtx.rotate((props.rotate * Math.PI) / 180);
|
||||||
|
drawCtx.fillText(props.text, 0, 0);
|
||||||
|
drawCtx.restore();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// 监听深色模式变化
|
||||||
|
const stopWatchDark = watch(isDark, () => {
|
||||||
|
drawWatermark();
|
||||||
|
});
|
||||||
|
|
||||||
|
// 监听属性变化
|
||||||
|
const stopWatchProps = watch(
|
||||||
|
computed(() => [
|
||||||
|
props.text,
|
||||||
|
props.fontSize,
|
||||||
|
props.color,
|
||||||
|
props.darkColor,
|
||||||
|
props.opacity,
|
||||||
|
props.rotate,
|
||||||
|
props.width,
|
||||||
|
props.height,
|
||||||
|
props.gapX,
|
||||||
|
props.gapY,
|
||||||
|
props.fontWeight,
|
||||||
|
props.fontFamily
|
||||||
|
]),
|
||||||
|
() => {
|
||||||
|
drawWatermark();
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
drawWatermark();
|
||||||
|
});
|
||||||
|
|
||||||
|
onUnmounted(() => {
|
||||||
|
stopWatchDark();
|
||||||
|
stopWatchProps();
|
||||||
|
});
|
||||||
|
|
||||||
|
defineExpose({
|
||||||
|
refresh: drawWatermark
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.cl-watermark {
|
||||||
|
@apply relative w-full h-full;
|
||||||
|
|
||||||
|
&__content {
|
||||||
|
@apply relative w-full h-full;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__canvas {
|
||||||
|
@apply absolute top-0 left-0 pointer-events-none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
24
uni_modules/cool-ui/components/cl-watermark/props.ts
Normal file
24
uni_modules/cool-ui/components/cl-watermark/props.ts
Normal file
@@ -0,0 +1,24 @@
|
|||||||
|
import type { PassThroughProps } from "../../types";
|
||||||
|
|
||||||
|
export type ClWatermarkPassThrough = {
|
||||||
|
className?: string;
|
||||||
|
container?: PassThroughProps;
|
||||||
|
};
|
||||||
|
|
||||||
|
export type ClWatermarkProps = {
|
||||||
|
className?: string;
|
||||||
|
pt?: ClWatermarkPassThrough;
|
||||||
|
text?: string;
|
||||||
|
fontSize?: number;
|
||||||
|
color?: string;
|
||||||
|
darkColor?: string;
|
||||||
|
opacity?: number;
|
||||||
|
rotate?: number;
|
||||||
|
width?: number;
|
||||||
|
height?: number;
|
||||||
|
gapX?: number;
|
||||||
|
gapY?: number;
|
||||||
|
zIndex?: number;
|
||||||
|
fontWeight?: string;
|
||||||
|
fontFamily?: string;
|
||||||
|
};
|
||||||
2
uni_modules/cool-ui/index.d.ts
vendored
2
uni_modules/cool-ui/index.d.ts
vendored
@@ -76,6 +76,7 @@ import type { ClTreeProps, ClTreePassThrough } from "./components/cl-tree/props"
|
|||||||
import type { ClTreeItemProps, ClTreeItemPassThrough } from "./components/cl-tree-item/props";
|
import type { ClTreeItemProps, ClTreeItemPassThrough } from "./components/cl-tree-item/props";
|
||||||
import type { ClUploadProps, ClUploadPassThrough } from "./components/cl-upload/props";
|
import type { ClUploadProps, ClUploadPassThrough } from "./components/cl-upload/props";
|
||||||
import type { ClWaterfallProps, ClWaterfallPassThrough } from "./components/cl-waterfall/props";
|
import type { ClWaterfallProps, ClWaterfallPassThrough } from "./components/cl-waterfall/props";
|
||||||
|
import type { ClWatermarkProps, ClWatermarkPassThrough } from "./components/cl-watermark/props";
|
||||||
|
|
||||||
export {};
|
export {};
|
||||||
|
|
||||||
@@ -156,5 +157,6 @@ declare module "vue" {
|
|||||||
"cl-tree-item": (typeof import('./components/cl-tree-item/cl-tree-item.uvue')['default']) & import('vue').DefineComponent<ClTreeItemProps>;
|
"cl-tree-item": (typeof import('./components/cl-tree-item/cl-tree-item.uvue')['default']) & import('vue').DefineComponent<ClTreeItemProps>;
|
||||||
"cl-upload": (typeof import('./components/cl-upload/cl-upload.uvue')['default']) & import('vue').DefineComponent<ClUploadProps>;
|
"cl-upload": (typeof import('./components/cl-upload/cl-upload.uvue')['default']) & import('vue').DefineComponent<ClUploadProps>;
|
||||||
"cl-waterfall": (typeof import('./components/cl-waterfall/cl-waterfall.uvue')['default']) & import('vue').DefineComponent<ClWaterfallProps>;
|
"cl-waterfall": (typeof import('./components/cl-waterfall/cl-waterfall.uvue')['default']) & import('vue').DefineComponent<ClWaterfallProps>;
|
||||||
|
"cl-watermark": (typeof import('./components/cl-watermark/cl-watermark.uvue')['default']) & import('vue').DefineComponent<ClWatermarkProps>;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user