如何实现水印功能

1、水印渲染容器

<section class="watermark"></section>​

2、使水印显示在最顶层，并且不影响底层元素事件触发

.watermark {
    position: fixed;
    top: $base-nav-height + $base-tabs-height + $base-padding;
    left: 0;
    z-index: 10000000;
    pointer-events: none; // 主要是这个属性
    width: 100%;
    height: $base-keep-alive-height;
 }

3、通过js 将内容生成 svg，并将svg设置成容器的背景

// 水印
/*
className 选择器
text 水印内容
*/
function init(className, text) {
  const fontSize = 18
  const rotate = -45
  const svgWidth = fontSize * text.length
  const svgHeight = svgWidth

  const watermarksvg = `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='${svgWidth}px' height='${svgHeight}px'%3E  %3Ctext  x='${fontSize}' y='0'  fill-opacity='0.1' fill='%23000' transform='translate(0,${svgHeight})rotate(${rotate})'    font-size='${fontSize}'%3E${text}%3C/text%3E%3C/svg%3E")`
  const el = document.querySelector<HTMLElement>('.' + className)
  if (el) {
    el.style.setProperty('background', watermarksvg)
  }
}

export default {
  init,
}