VUE3实现全局水印效果

在Vue3中实现全局水印效果通常涉及以下几个步骤：

1. **创建组件**：首先，你可以创建一个单独的`Watermark.vue`组件来表示水印。这个组件可以包含一个文本元素和样式，比如定位在屏幕底部中央。

<template>
  <div class="watermark" :style="{ bottom: 'auto', position: 'fixed', right: 0 }">
    <span class="watermark-text">全局水印</span>
  </div>
</template>

<style scoped>
.watermark {
  color: rgba(255, 255, 255, 0.5);
  background-color: rgba(0, 0, 0, 0.5);
  width: 100%;
  height: 40px;
  font-size: small;
}
</style>

2. **注册组件**：然后，在`main.js`或者其他应用配置文件中注册该组件，使其在整个应用程序中可用。

import Watermark from './components/Watermark.vue';

// 注册组件
export default {
  components: { Watermark },
};

3. **放置水印**：在需要显示水印的地方，通过`v-if`或`v-show`指令来条件渲染水印组件。如果不需要全局显示，可以在某个特定的组件或路由视图中选择性地禁用它。

<template>
  <div>
    <!-- 其他内容 -->
    <Watermark v-if="$app.config.globalProperties.showWatermark" />
  </div>
</template>

<script setup>
import { ref } from 'vue';
const showWatermark = ref(true); // 可以通过store或其他状态管理工具控制这个值
</script>