mirror/element-plus
2
0
Fork 0
mirror of https://github.com/element-plus/element-plus.git synced 2024-11-27 02:01:15 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(docs): [watermark] adjusting the text color in dark mode (#14871)

Browse Source
This commit is contained in:
btea 2023-11-19 13:31:30 +08:00 committed by GitHub
parent 74bfbefc28
commit 92df6df5b6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 43 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
docs/examples/watermark/basic.vue
View File

@ -1,5 +1,26 @@
<script setup lang="ts">
import { reactive, watch } from 'vue'
import { isDark } from '~/composables/dark'
const font = reactive({
color: 'rgba(0, 0, 0, .15)',
})
watch(
isDark,
() => {
font.color = isDark.value
? 'rgba(255, 255, 255, .15)'
: 'rgba(0, 0, 0, .15)'
},
{
immediate: true,
}
)
</script>
<template>
<el-watermark>
<el-watermark :font="font">
<div style="height: 500px" />
</el-watermark>
</template>

22
docs/examples/watermark/multi-line.vue
View File

@ -1,5 +1,25 @@
<script setup lang="ts">
import { reactive, watch } from 'vue'
import { isDark } from '~/composables/dark'
const font = reactive({
color: 'rgba(0, 0, 0, .15)',
})
watch(
isDark,
() => {
font.color = isDark.value
? 'rgba(255, 255, 255, .15)'
: 'rgba(0, 0, 0, .15)'
},
{
immediate: true,
}
)
</script>
<template>
<el-watermark :content="['Element+', 'Element Plus']">
<el-watermark :font="font" :content="['Element+', 'Element Plus']">
<div style="height: 500px" />
</el-watermark>
</template>