Watermark | Sard

介绍

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

代码演示

基础使用

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

vue

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

多行水印

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

vue

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

图片水印

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

vue tsvue js

vue

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

<script setup lang="ts">
import image from '@/assets/logo-name.png'
</script>

vue

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

<script setup lang="js">
import image from '@/assets/logo-name.png'
</script>

自定义绘制

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

vue tsvue js

vue

<template>
  <doc-page gray title="自定义绘制">
    <s-watermark
      class="fixed"
      :content="content"
      :font="{
        fontSize,
        textAlign,
        color,
      }"
      :z-index="9999"
      :gap="[gapX, gapY]"
      :offset="[offsetX, offsetY]"
      :rotate="rotate"
    />

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

<script setup lang="ts">
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('Sard\nVue3 + TS')
const content = computed(() =>
  strContent.value
    .trim()
    .split('\n')
    .filter(Boolean)
    .map((item) => item.trim()),
)
const color = ref('rgba(128,128,128,.3)')
</script>

vue

<template>
  <doc-page gray title="自定义绘制">
    <s-watermark
      class="fixed"
      :content="content"
      :font="{
        fontSize,
        textAlign,
        color,
      }"
      :z-index="9999"
      :gap="[gapX, gapY]"
      :offset="[offsetX, offsetY]"
      :rotate="rotate"
    />

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

<script setup lang="js">
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('Sard\nVue3 + TS')
const content = computed(() =>
  strContent.value
    .trim()
    .split('\n')
    .filter(Boolean)
    .map((item) => item.trim()),
)
const color = ref('rgba(128,128,128,.3)')
</script>

API

WatermarkProps

属性	描述	类型	默认值
width	图片水印的宽度	number	120
height	图片水印的高度	number	64
rotate	水印的旋转角度	number	-22
z-index	水印元素的z-index值	number	9
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	字体大小	number	14
fontWeight	字重	string \| number	normal
fontFamily	字体	string	'sans-serif'
fontStyle	字体样式	'none' \| 'normal' \| 'italic' \| 'oblique'	'normal'
textAlign	对齐方式	'left' \| 'right' \| 'center'	'center'

介绍 ​

代码演示 ​

基础使用 ​

多行水印 ​

图片水印 ​

自定义绘制 ​

API ​

WatermarkProps ​

WatermarkFont ​

介绍