mirror of
https://github.com/pure-admin/vue-pure-admin.git
synced 2025-06-06 00:18:51 +08:00
feat: 丰富水印功能页面
This commit is contained in:
xiaoxian521
parent
bfa9203883
commit
ead4318163
@ -35,7 +35,7 @@
|
||||
"@pureadmin/components": "^1.1.0",
|
||||
"@pureadmin/descriptions": "^1.1.0",
|
||||
"@pureadmin/table": "^1.2.0",
|
||||
"@pureadmin/utils": "^1.1.5",
|
||||
"@pureadmin/utils": "^1.2.1",
|
||||
"@vueuse/core": "^9.5.0",
|
||||
"@vueuse/motion": "2.0.0-beta.12",
|
||||
"@wangeditor/editor": "^5.1.21",
|
||||
|
||||
8
pnpm-lock.yaml
generated
8
pnpm-lock.yaml
generated
@ -22,7 +22,7 @@ specifiers:
|
||||
"@pureadmin/descriptions": ^1.1.0
|
||||
"@pureadmin/table": ^1.2.0
|
||||
"@pureadmin/theme": ^2.4.0
|
||||
"@pureadmin/utils": ^1.1.5
|
||||
"@pureadmin/utils": ^1.2.1
|
||||
"@types/element-resize-detector": 1.1.3
|
||||
"@types/js-cookie": ^3.0.1
|
||||
"@types/lodash": ^4.14.180
|
||||
@ -133,7 +133,7 @@ dependencies:
|
||||
"@pureadmin/components": 1.1.0_vue@3.2.45
|
||||
"@pureadmin/descriptions": 1.1.1_element-plus@2.2.21
|
||||
"@pureadmin/table": 1.2.0_element-plus@2.2.21
|
||||
"@pureadmin/utils": 1.1.5_aotapuqn7htzdjltsyimavekky
|
||||
"@pureadmin/utils": 1.2.1_aotapuqn7htzdjltsyimavekky
|
||||
"@vueuse/core": 9.5.0_vue@3.2.45
|
||||
"@vueuse/motion": 2.0.0-beta.12_vue@3.2.45
|
||||
"@wangeditor/editor": 5.1.22
|
||||
@ -1410,10 +1410,10 @@ packages:
|
||||
string-hash: 1.1.3
|
||||
dev: true
|
||||
|
||||
/@pureadmin/utils/1.1.5_aotapuqn7htzdjltsyimavekky:
|
||||
/@pureadmin/utils/1.2.1_aotapuqn7htzdjltsyimavekky:
|
||||
resolution:
|
||||
{
|
||||
integrity: sha512-5nQZyFAbs59gkMBj0WLox7BlY7llILR/ENo2QNEKW6avMt8sDL1+858EFjEbELl6enPsVvJpoCTxatmZzVjyAw==
|
||||
integrity: sha512-qcuRwW2DoXHCblFcZcYVAypV12I2P5sw0fvBnLfREtQ3Zlx51y4z0hOByncBFrNc9vFc3CoNM9UYlzsIedNP9A==
|
||||
}
|
||||
peerDependencies:
|
||||
dayjs: "*"
|
||||
|
||||
@ -1,21 +1,43 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
import { ref, onMounted, nextTick, onBeforeUnmount } from "vue";
|
||||
import { useWatermark } from "@pureadmin/utils";
|
||||
|
||||
defineOptions({
|
||||
name: "WaterMark"
|
||||
});
|
||||
|
||||
const local = ref();
|
||||
const preventLocal = ref();
|
||||
const color = ref("#409EFF");
|
||||
const value = ref("vue-pure-admin");
|
||||
const { setWatermark, clear } = useWatermark();
|
||||
const { setWatermark: setLocalWatermark, clear: clearLocal } =
|
||||
useWatermark(local);
|
||||
const { setWatermark: setPreventLocalWatermark } = useWatermark(preventLocal);
|
||||
|
||||
onMounted(() => {
|
||||
nextTick(() => {
|
||||
setPreventLocalWatermark("无法删除的水印", {
|
||||
forever: true,
|
||||
width: 187,
|
||||
height: 80
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
// 在离开该页面时清除整页水印
|
||||
clear();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-card>
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="font-medium">页面水印功能</span>
|
||||
<span class="font-medium">
|
||||
页面水印功能（将平台主题改为亮白色观察水印效果更明显哦）
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
<span> 请输入要创建水印的值：</span>
|
||||
@ -29,10 +51,132 @@ const { setWatermark, clear } = useWatermark();
|
||||
<el-color-picker v-model="color" show-alpha />
|
||||
<br />
|
||||
<el-button @click="setWatermark(value, { fillStyle: color })">
|
||||
创建
|
||||
创建整页水印
|
||||
</el-button>
|
||||
<el-button @click="clear">清除</el-button>
|
||||
<el-button
|
||||
@click="
|
||||
setWatermark(value, {
|
||||
gradient: [
|
||||
{ value: 0, color: 'magenta' },
|
||||
{ value: 0.5, color: 'blue' },
|
||||
{ value: 1.0, color: 'red' }
|
||||
]
|
||||
})
|
||||
"
|
||||
>
|
||||
创建整页渐变水印
|
||||
</el-button>
|
||||
<el-button
|
||||
@click="
|
||||
setWatermark(value, {
|
||||
rotate: 0,
|
||||
gradient: [
|
||||
{ value: 0, color: 'magenta' },
|
||||
{ value: 0.5, color: 'blue' },
|
||||
{ value: 1.0, color: 'red' }
|
||||
]
|
||||
})
|
||||
"
|
||||
>
|
||||
创建整页渐变且水平90度的水印
|
||||
</el-button>
|
||||
<el-button
|
||||
@click="
|
||||
setWatermark(value, {
|
||||
gradient: [
|
||||
{ value: 0, color: 'magenta' },
|
||||
{ value: 0.5, color: 'blue' },
|
||||
{ value: 1.0, color: 'red' }
|
||||
],
|
||||
shadowConfig: [20]
|
||||
})
|
||||
"
|
||||
>
|
||||
创建整页渐变且有阴影的水印
|
||||
</el-button>
|
||||
<el-button
|
||||
@click="
|
||||
setWatermark(value, {
|
||||
globalAlpha: 0.15, // 值越低越透明
|
||||
gradient: [
|
||||
{ value: 0, color: 'magenta' },
|
||||
{ value: 0.5, color: 'blue' },
|
||||
{ value: 1.0, color: 'red' }
|
||||
]
|
||||
})
|
||||
"
|
||||
>
|
||||
创建整页高透明渐变水印
|
||||
</el-button>
|
||||
<el-button @click="clear">清除整页水印</el-button>
|
||||
|
||||
<div
|
||||
ref="local"
|
||||
class="mt-4 mb-4 w-[1080px] h-[400px] border-dotted border-2 border-sky-500"
|
||||
/>
|
||||
<el-button
|
||||
@click="
|
||||
setLocalWatermark('局部水印', {
|
||||
fillStyle: color,
|
||||
width: 140,
|
||||
height: 60
|
||||
})
|
||||
"
|
||||
>
|
||||
创建局部水印
|
||||
</el-button>
|
||||
<el-button
|
||||
@click="
|
||||
setLocalWatermark('局部水印', {
|
||||
width: 140,
|
||||
height: 60,
|
||||
gradient: [
|
||||
{ value: 0, color: 'magenta' },
|
||||
{ value: 0.5, color: 'blue' },
|
||||
{ value: 1.0, color: 'red' }
|
||||
]
|
||||
})
|
||||
"
|
||||
>
|
||||
创建局部渐变水印
|
||||
</el-button>
|
||||
<el-button
|
||||
@click="
|
||||
setLocalWatermark('局部水印', {
|
||||
width: 140,
|
||||
height: 56.5,
|
||||
rotate: 0,
|
||||
gradient: [
|
||||
{ value: 0, color: 'magenta' },
|
||||
{ value: 0.5, color: 'blue' },
|
||||
{ value: 1.0, color: 'red' }
|
||||
]
|
||||
})
|
||||
"
|
||||
>
|
||||
创建局部渐变且水平90度的水印
|
||||
</el-button>
|
||||
<el-button
|
||||
@click="
|
||||
setLocalWatermark('局部水印', {
|
||||
width: 140,
|
||||
height: 56.5,
|
||||
gradient: [
|
||||
{ value: 0, color: 'magenta' },
|
||||
{ value: 0.5, color: 'blue' },
|
||||
{ value: 1.0, color: 'red' }
|
||||
],
|
||||
shadowConfig: [20]
|
||||
})
|
||||
"
|
||||
>
|
||||
创建局部渐变且有阴影的水印
|
||||
</el-button>
|
||||
<el-button @click="clearLocal">清除局部水印</el-button>
|
||||
|
||||
<div
|
||||
ref="preventLocal"
|
||||
class="mt-4 mb-4 w-[1080px] h-[400px] border-dotted border-2 border-indigo-500"
|
||||
/>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user