uniapp使用vue3添加水印

要在Uniapp中使用Vue3添加水印，你可以按照以下步骤进行操作：

1. 首先，在你的Uniapp项目中创建一个新的Vue组件，例如Watermark.vue。

2. 在Watermark.vue中，使用Vue3的语法来定义组件，并引入需要的样式和图片资源。

<template>
  <div class="watermark-container">
    <img src="@/assets/watermark.png" alt="watermark" class="watermark-image" />
  </div>
</template>

<script>
export default {
  name: 'Watermark',
};
</script>

<style scoped>
.watermark-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  pointer-events: none; /* 防止水印遮挡用户操作 */
}

.watermark-image {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.5; /* 设置透明度，可以根据需求调整 */
}
</style>

3. 在需要添加水印的页面中，使用Watermark组件。

<template>
  <div class="page-container">
    <!-- 页面内容 -->
    <Watermark />
  </div>
</template>

<script>
import Watermark from '@/components/Watermark.vue';

export default {
  components: {
    Watermark,
  },
};
</script>

<style>
.page-container {
  /* 页面样式 */
}
</style>

通过以上步骤，你就可以在Uniapp中使用Vue3来添加水印了。在Watermark.vue中，你可以根据需求自定义水印的样式和位置。记得在Watermark.vue的style标签上添加scoped属性，以确保样式只应用于当前组件。