@rotick/dom-mark v1.2.0

dom-mark

| 中文文档

Add text/HTML as watermark to DOM node

• automatically calculate size and position
• 4kb mini library
• support IE 9+ and all mobile browser
• customizable HTML content and style
• observe dom changes and rerender with MutationObserver

Demo

ESM | UMD | mobile

Install

npm i @rotick/dom-mark -S

In browser, download dist/dom-mark.js to your project:

<script src="/path/to/dom-mark.js"></script>

Useage

import DomMark from '@rotick/dom-mark'

const domMark = new DomMark('body', {
  content: '水印', // html,text
  fontSize: 'inherit',
  fontFamily: 'inherit',
  color: 'inherit',
  opacity: .3,
  padding: 20,
  zIndex: 6000,
  minMargin: [40, 20],
  rotate: -15,
  observe: true
})

domMark.render()

update:

domMark.update({
  content: '<img src="/watermark.png" width="60" />'
})

important: if you want to use setInterval or setTimeout to update, don't forget clearInterval or clearTimeout, otherwise maybe it will cause a crash(e.g. webpack HMR)

destroy:

domMark.destroy()

API

const dm = new DomMark(selector, options)
dm.render()
dm.update(options)
dm.destroy()

selector can be a HTMLElement object or document.querySelector's parameter, default: body

options

Change log

v1.1.0 2020/05/17

rerender when hot module reload, rerender only when watermark change in MutationObserver

Questions & Suggestions

Please open an issue here.

License

MIT