Sard Uniapp

Appearance

在新窗口打开⤴

Watermark水印1.24+

介绍 ​

在页面上添加文本或图片等水印信息。

引入 ​

js
import Watermark from 'sard-uniapp/components/watermark/watermark.vue'

代码演示 ​

基础使用 ​

使用 content 属性设置水印文本。Watermark 组件会绝对定位并覆盖在第一个非 static 定位的祖先元素。

vue
<template>
  <view style="position: relative; height: 240px">
    <sar-watermark
      content="Sard Uniapp"
      :font="{ color: 'rgba(128,128,128,.3)' }"
    />
  </view>
</template>

多行水印 ​

使用 content 设置一个字符串数组来指定多行文本水印内容。

vue
<template>
  <view style="position: relative; height: 240px">
    <sar-watermark
      :content="['Sard Uniapp', 'Vue + TS + UniApp']"
      :font="{ color: 'rgba(128,128,128,.3)' }"
    />
  </view>
</template>

图片水印 ​

通过 image 指定图像地址。 为了确保图像清晰展示而不是被拉伸，请设置宽度和高度，建议使用至少两倍的宽度和高度的图片来保证显示效果。

vue
<template>
  <view style="position: relative; height: 240px">
    <sar-watermark :image="image" :width="126" :height="36" />
  </view>
</template>

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

const image = ref('/static/logo-name.png')

// #ifndef H5
image.value = 'https://sard.wzt.zone/mobile/static/logo-name.png'
// #endif
</script>
vue
<template>
  <view style="position: relative; height: 240px">
    <sar-watermark :image="image" :width="126" :height="36" />
  </view>
</template>

<script setup lang="js">
import { ref } from "vue";
const image = ref("/static/logo-name.png");
image.value = "https://sard.wzt.zone/mobile/static/logo-name.png";
</script>

自定义绘制 ​

配置自定义参数预览水印效果。

vue
<template>
  <page-meta :page-style="isLocked ? 'overflow: hidden' : ''"></page-meta>
  <doc-page title="自定义绘制">
    <sar-watermark
      class="fixed"
      :content="content"
      :font="{
        fontSize,
        textAlign,
        color,
      }"
      :z-index="9999"
      :gap="[gapX, gapY]"
      :offset="[offsetX, offsetY]"
      :rotate="rotate"
    />

    <sar-form label-width="120rpx">
      <sar-form-item label="textAlign">
        <sar-segmented
          v-model="textAlign"
          :options="['left', 'center', 'right']"
        />
      </sar-form-item>
      <sar-form-item label="rotate">
        <sar-slider v-model="rotate" :min="-180" :max="180" show-value />
      </sar-form-item>
      <sar-form-item label="fontSize">
        <sar-slider v-model="fontSize" :min="1" :max="100" show-value />
      </sar-form-item>
      <sar-form-item label="gapX">
        <sar-slider v-model="gapX" :min="-100" :max="100" show-value />
      </sar-form-item>
      <sar-form-item label="gapY">
        <sar-slider v-model="gapY" :min="-100" :max="100" show-value />
      </sar-form-item>
      <sar-form-item label="offsetX">
        <sar-slider v-model="offsetX" :min="-100" :max="100" show-value />
      </sar-form-item>
      <sar-form-item label="offsetY">
        <sar-slider v-model="offsetY" :min="-100" :max="100" show-value />
      </sar-form-item>
      <sar-form-item label="content">
        <sar-input v-model="strContent" type="textarea" />
      </sar-form-item>
      <sar-form-item label="color">
        <sar-color-picker-input v-model="color" show-alpha show-presets />
      </sar-form-item>
    </sar-form>
  </doc-page>
</template>

<script setup lang="ts">
import { useCurrentPageLock, usePageTopPopup } from 'sard-uniapp'
import { onBackPress } from '@dcloudio/uni-app'
import { computed, ref } from 'vue'

const rotate = ref(-22)
const fontSize = ref(14)
const gapX = ref(30)
const gapY = ref(30)
const offsetX = ref(gapX.value / 2)
const offsetY = ref(gapY.value / 2)
const textAlign = ref('center')
const strContent = ref('SardUniapp\nUniapp + Vue3 + TS')
const content = computed(() =>
  strContent.value
    .trim()
    .split('\n')
    .filter(Boolean)
    .map((item) => item.trim()),
)
const color = ref('rgba(128,128,128,.3)')

const { isLocked } = useCurrentPageLock()

const { shouldStopBack, hidePopup } = usePageTopPopup()

onBackPress(() => {
  if (shouldStopBack.value) {
    hidePopup()
    return true
  }
})
</script>
vue
<template>
  <page-meta :page-style="isLocked ? 'overflow: hidden' : ''"></page-meta>
  <doc-page title="自定义绘制">
    <sar-watermark
      class="fixed"
      :content="content"
      :font="{
        fontSize,
        textAlign,
        color,
      }"
      :z-index="9999"
      :gap="[gapX, gapY]"
      :offset="[offsetX, offsetY]"
      :rotate="rotate"
    />

    <sar-form label-width="120rpx">
      <sar-form-item label="textAlign">
        <sar-segmented
          v-model="textAlign"
          :options="['left', 'center', 'right']"
        />
      </sar-form-item>
      <sar-form-item label="rotate">
        <sar-slider v-model="rotate" :min="-180" :max="180" show-value />
      </sar-form-item>
      <sar-form-item label="fontSize">
        <sar-slider v-model="fontSize" :min="1" :max="100" show-value />
      </sar-form-item>
      <sar-form-item label="gapX">
        <sar-slider v-model="gapX" :min="-100" :max="100" show-value />
      </sar-form-item>
      <sar-form-item label="gapY">
        <sar-slider v-model="gapY" :min="-100" :max="100" show-value />
      </sar-form-item>
      <sar-form-item label="offsetX">
        <sar-slider v-model="offsetX" :min="-100" :max="100" show-value />
      </sar-form-item>
      <sar-form-item label="offsetY">
        <sar-slider v-model="offsetY" :min="-100" :max="100" show-value />
      </sar-form-item>
      <sar-form-item label="content">
        <sar-input v-model="strContent" type="textarea" />
      </sar-form-item>
      <sar-form-item label="color">
        <sar-color-picker-input v-model="color" show-alpha show-presets />
      </sar-form-item>
    </sar-form>
  </doc-page>
</template>

<script setup lang="js">
import { useCurrentPageLock, usePageTopPopup } from "sard-uniapp";
import { onBackPress } from "@dcloudio/uni-app";
import { computed, ref } from "vue";
const rotate = ref(-22);
const fontSize = ref(14);
const gapX = ref(30);
const gapY = ref(30);
const offsetX = ref(gapX.value / 2);
const offsetY = ref(gapY.value / 2);
const textAlign = ref("center");
const strContent = ref("SardUniapp\nUniapp + Vue3 + TS");
const content = computed(
  () => strContent.value.trim().split("\n").filter(Boolean).map((item) => item.trim())
);
const color = ref("rgba(128,128,128,.3)");
const { isLocked } = useCurrentPageLock();
const { shouldStopBack, hidePopup } = usePageTopPopup();
onBackPress(() => {
  if (shouldStopBack.value) {
    hidePopup();
    return true;
  }
});
</script>

API ​

WatermarkProps ​

属性描述类型默认值
root-class组件根元素类名string-
root-style组件根元素样式StyleValue-
width图片水印的宽度number120
height图片水印的宽度number64
rotate水印的旋转角度number-22
z-index水印元素的z-index值number9
image水印图片，建议使用 2x 或 3x 图像string-
content水印文本内容string | string[]-
font文字样式WatermarkFont-
gap水印之间的间距[x: number, y: number][30, 30]
offset水印从容器左上角的偏移[x: number, y: number][gap[0]/2, gap[1]/2]

WatermarkFont ​

属性描述类型默认值
color字体颜色string'rgba(0,0,0,.15)'
fontSize字体大小number14
fontWeight字重string | numbernormal
fontFamily字体string'sans-serif'
fontStyle字体样式'none' | 'normal' | 'italic' | 'oblique''normal'
textAlign字体样式'left' | 'right' | 'center''center'

Released under the MIT License.

Copyright © 2023-present wuzhitao