Mango UI

Watermark 水印 pass 0.0.13+

基础用法

展开查看
<mg-watermark>
  <div id="div">我是个 120px 高的div</div>
</mg-watermark>

<style>
#div{
  border:1px solid #666;
  height:120px;
  text-align:center;
}
</style>
1
2
3
4
5
6
7
8
9
10
11

Help Yourself

em...就不过多解释了，可以自行尝试下~😶
😅不过这个demo嘛...看来差不多该准备 input 组件了

展开查看
<mg-watermark
  :content="content"
  :fontSize="fontSize"
  :fullscreen="fullscreen"
  :rotate="rotate"
  :fontStyle="fontStyle"
  :fontFamily="fontFamily"
  :blockWidth="blockWidth"
  :blockHeight="blockHeight"
  :xGap="xGap"
  :yGap="yGap"
>
  <div>我是个 320px 高的div</div>
</mg-watermark>
<script>
  export default{
    data(){
      return{
        content:undefined,
        fullscreen: false,
        fontSize: 16,
        rotate: -24,
        fontStyle: "rgba(156, 162, 169, 0.3)",
        fontFamily: 'Arial',
        blockWidth: 328,
        blockHeight: 138,
        xGap: 0,
        yGap: 48,
      }
    },
  }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

全屏使用时可以不必设置 slot

您可能发现了全屏的时候好像没有...那么的全屏，这是因为在这个页面中， 顶部栏和左侧导航栏是有背景颜色的，这种情况可以通过设置zIndex 属性来解决~📌

<mg-watermark :content="content" :fullscreen="true">
</mg-watermark>
1
2

使用图片

传入 imgUrl 时会忽略文本相关的属性以及 rotate 属性 ❗

展开查看
<mg-watermark
  :imgUrl="'/mango.png'"
>
  <div>我是个 200px 高的div</div>
</mg-watermark>
1
2
3
4
5

另一种方式

场景： 我只需要一张图片，具体怎么排版我自己来

展开查看
<script lang="ts">
import { createWatermarkDataURL } from 'mango-ui-vue/packages/water-mark'
// 如果已经使用全量组件，也可以直接 from 'mango-ui-vue'

export default{
  setup(){
    const someConfig: waterMarkParams = {}
    createWatermarkDataURL(someConfig).then(dataUrl=>{
      document.querySelector('#myDom').style.backgroundImage = `url(${dataUrl})`
    })
    return {}
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
interface waterMarkParams {
  content?: string
  fontSize?: number
  fontStyle?: string
  fontFamily?: string
  rotate?: number
  blockWidth?: number
  blockHeight?: number
  xGap?: number
  yGap?: number
  imgUrl?: string
  imgOpacity?: number
  imgWidth?: number
  imgHeight?: number
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
一些赘述

上面这种方式乍看上去有一些鸡肋，其实开发这个方法的目的也是为了应对一些极端情况
如特殊排版的水印，有安全性要求的场景

关于安全性，watermark 本身是使用 dom 实现的，这种方式生成的水印可以被轻易的删除，因此在有一些安全性要求 相对 较高的情况下，可以使用这种方式来便利的生成背景图， 然后针对自己的 dom 进行一些安全的，或者说防删除的措施

Watermark Attributes

参数说明类型可选值默认值
content文本string-mango-ui😁
fullscreen是否全屏boolean-false
fontSize字体大小（px）number—16
fontStyle字体样式string—rgba(156, 162, 169, 0.3)
fontFamily字体string—Arial
rotate旋转角度number—-24
blockWidth一个背景块的宽度(px)number—328
blockHeight一个背景块的高度(px)number—138
xGap图片或文字x轴偏移量number—0
yGap图片或文字y轴偏移量number—48
imgUrl图片路径string—-
imgOpacity图片透明度number—0.3
imgWidth图片宽度（略缩图片时使用）number—-
imgHeight图片高度（略缩图片时使用）number—-
zIndex水印的zIndexnumber—-1