介绍

本文档主要用于描述 ShadcnWatermark 组件的一些功能和用法。

用法

查看代码

<template>
  <ShadcnWatermark>
    <div style="height: 24rem;"/>
  </ShadcnWatermark>
</template>

内容 (content)

查看代码

<template>
  <ShadcnWatermark :content="['Company', 'Name', 'Time']">
    <div class="h-96"/>
  </ShadcnWatermark>
</template>

全屏 (fullscreen)

查看代码

<template>
  <ShadcnWatermark :content="['Company', 'Name', 'Time']" :fullscreen="fullScreen"/>
  <ShadcnButton @click="fullScreen = !fullScreen">FullScreen</ShadcnButton>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const fullScreen = ref(false)
</script>

液态玻璃效果 (glass)

查看代码

<template>
    <div :class="['p-6 rounded-lg', darkMode ? 'bg-gradient-to-r from-cyan-900 to-blue-900' : 'bg-gradient-to-r from-cyan-400 to-blue-400']">
      <ShadcnWatermark :content="['液态玻璃水印', 'Glass Effect']" glass :dark="darkMode" :fontSize="12" :gapX="150" :gapY="150">
        <div :class="['p-8 rounded-lg text-center', darkMode ? 'bg-gray-800/50' : 'bg-white/50']" style="min-height: 24rem;">
          <h4 :class="['text-2xl font-bold mb-4', darkMode ? 'text-gray-100' : 'text-gray-800']">带水印的内容区域</h4>
          <p :class="[darkMode ? 'text-gray-300' : 'text-gray-600']">这是一个带有液态玻璃效果的水印示例</p>
          <p :class="[darkMode ? 'text-gray-300' : 'text-gray-600']">水印会在整个内容区域重复显示</p>
        </div>
      </ShadcnWatermark>
    </div>
</template>

<script setup lang="ts">
import { useData } from 'vitepress'
import { computed } from 'vue'

const { isDark } = useData()
const darkMode = computed(() => isDark.value)
</script>

水印 (Watermark) 属性