Watermark 水印 ​

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

ts
import { createApp } from 'vue'
import { Watermark as ElWatermark } from '@szhn/dh-design-pc'

const app = createApp()
app.use(ElWatermark)

基础用法 ​

最简单的用法。

<script setup lang="ts">
import { Watermark as ElWatermark } from '@szhn/dh-design-pc'

</script>

<template>
  <el-watermark>
    <div style="height: 500px" />
  </el-watermark>
</template>

多行水印 ​

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

<script setup lang="ts">
import { Watermark as ElWatermark } from '@szhn/dh-design-pc'

</script>

<template>
  <el-watermark :content="['Element+', 'Element Plus']">
    <div style="height: 500px" />
  </el-watermark>
</template>

图片水印 ​

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

<script setup lang="ts">
import { Watermark as ElWatermark } from '@szhn/dh-design-pc'

</script>

<template>
  <el-watermark
    :width="130"
    :height="30"
    image="https://element-plus.org/images/element-plus-logo.svg"
  >
    <div style="height: 500px" />
  </el-watermark>
</template>

自定义配置 ​

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

<script setup lang="ts">
import { reactive } from 'vue'
import { ColorPicker as ElColorPicker, Form as ElForm, FormItem as ElFormItem, Input as ElInput, InputNumber as ElInputNumber, Slider as ElSlider, Space as ElSpace, Watermark as ElWatermark } from '@szhn/dh-design-pc'


const config = reactive({
  content: 'Element Plus',
  font: {
    fontSize: 16,
    color: 'rgba(0, 0, 0, 0.15)',
  },
  zIndex: -1,
  rotate: -22,
  gap: [100, 100] as [number, number],
  offset: [] as unknown as [number, number],
})
</script>

<template>
  <div class="wrapper">
    <el-watermark
      class="watermark"
      :content="config.content"
      :font="config.font"
      :z-index="config.zIndex"
      :rotate="config.rotate"
      :gap="config.gap"
      :offset="config.offset"
    >
      <div class="watermark-container">
        <h1>Element Plus</h1>
        <h2>A Vue 3 based component library for designers and developers</h2>
      </div>
    </el-watermark>
    <el-form
      class="form"
      :model="config"
      label-position="top"
      label-width="50px"
    >
      <el-form-item label="Content">
        <el-input v-model="config.content" />
      </el-form-item>
      <el-form-item label="Color">
        <el-color-picker v-model="config.font.color" show-alpha />
      </el-form-item>
      <el-form-item label="FontSize">
        <el-slider v-model="config.font.fontSize" />
      </el-form-item>
      <el-form-item label="zIndex">
        <el-slider v-model="config.zIndex" />
      </el-form-item>
      <el-form-item label="Rotate">
        <el-slider v-model="config.rotate" :min="-180" :max="180" />
      </el-form-item>
      <el-form-item label="Gap">
        <el-space>
          <el-input-number v-model="config.gap[0]" controls-position="right" />
          <el-input-number v-model="config.gap[1]" controls-position="right" />
        </el-space>
      </el-form-item>
      <el-form-item label="Offset">
        <el-space>
          <el-input-number
            v-model="config.offset[0]"
            placeholder="offsetLeft"
            controls-position="right"
          />
          <el-input-number
            v-model="config.offset[1]"
            placeholder="offsetTop"
            controls-position="right"
          />
        </el-space>
      </el-form-item>
    </el-form>
  </div>
</template>

<style scoped>
.wrapper {
  display: flex;
}
.watermark {
  display: flex;
  flex: auto;
}
.watermark-container {
  flex: auto;
}
.form {
  width: 330px;
  margin-left: 20px;
  border-left: 1px solid #eee;
  padding-left: 20px;
}

img {
  z-index: 10;
  width: 100%;
  max-width: 300px;
  position: relative;
}
</style>

API ​

属性 ​

属性名描述类型默认值
width水印的宽度， content 的默认值是它自己的宽度number120
height水印的高度， content 的默认值是它自己的高度number64
rotate水印的旋转角度, 单位 °number-22
z-index水印元素的z-index值number9
image水印图片，建议使用 2x 或 3x 图像string—
content水印文本内容string / arraydh-design-pc
font文字样式Font字体
gap水印之间的间距array[100, 100]
offset水印从容器左上角的偏移 默认值为 gap/2array[gap[0]/2, gap[1]/2]

Font ​

名称详情类型默认
color字体颜色stringrgba(0,0,0,.15)
fontSize字体大小number / string16
fontWeight字重enumnormal
fontFamily字体stringsans-serif
fontGap 2.11.5字体间隙number3
fontStyle字体样式enumnormal
textAlign文本对齐enumcenter
textBaseline文本基线enumhanging

Slots ​

名称详情
默认添加水印的容器