Uniapp Vue3 Vite 移动端水印组件

1、水印组件

<template>
  <view class="watermark-box">
    <view
        class="watermark-item"
        v-for="i in 50"
        :key="i"
        :style="{
        left: `${((i - 1) % 5) * 30}%`,
        top: `${Math.floor((i - 1) / 5) * 15}%`,
        transform: `rotate(${rotate}deg)`,
        color: color,
        fontSize: `${fontSize}rpx`,
      }"
    >
      {{ showText }}
    </view>
  </view>
</template>

<script setup lang="ts">
import { computed } from "vue"
import {useUserStore} from "@/store/modules/user"
const props = defineProps({
  // 水印文字
  text: {
    type: String,
    default: ''
  },
  // 旋转角度
  rotate: {
    type: Number,
    default: -45
  },
  // 字体颜色
  color: {
    type: String,
    default: 'rgba(0, 0, 0, 0.1)'
  },
  // 字体大小
  fontSize: {
    type: Number,
    default: 28
  }
})

const userStore = useUserStore()
const showText = computed(()=>{
  return userStore.getUserInfo.username || "内部资料"
})
</script>

<style scoped>
/* 核心：强制固定在屏幕，不参与页面滚动 */
.watermark-box {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 9999;

  /* 额外加固：不随页面回弹位移 */
  transform: translateZ(0);
  backface-visibility: hidden;
  will-change: transform;
}

.watermark-item {
  position: absolute;
  white-space: nowrap;
}
</style>

2、配置：

{
  "path": "pages/chat/index",
  "style": {
    "app-plus": {
      "bounce": "none"  // 关闭回弹，不关闭会有屏幕回弹的效果，同时会出现水印跟随滚动的效果
    },
    "navigationStyle": "custom",
    "navigationBarBackgroundColor": "#f8f8f8"
  }
},

3、哪个页面需要配置水印，就在哪个页面引入