Skip to content

Latest commit

 

History

History
95 lines (78 loc) · 2.58 KB

README.md

File metadata and controls

95 lines (78 loc) · 2.58 KB
Raw

dom-mark

NPM version | 中文文档

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

demo

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

option type default introduction
content String - HTML string or text
fontSize String inherit font size, e.g. 16px,2rem
fontFamily String inherit font family
color String inherit font color
opacity Number .3 opacity of content, 0~1
padding Number 20 the parent element padding, unit: px
zIndex Number 6000 z-index of centent
minMargin Array [40, 20] [vertical, horizontal], margin of item unit: px
rotate Number -15 rotation angle of item
observe Boolean true observe the dom change and rerender, prevent user delete watermarks, work with MutationObserver, see caniuse

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