vue-watermarker

English | 中文

Cover the watermark on your website, which cannot be deleted or tampered with!

Install

npm install vue-watermarker
// or
yarn add vue-watermarker

Props

| props | type | default | required | remark | | :------------: | :-----------: | :-----------: | :-----------: | :--------------: | | content | string[] | [] | Yes | Watermark content, supports html element | | visible | boolean | true | No | Dynamically create and destroy watermark components, created by default during initialization | |styleOption| Object |{fontSize: '15px',color: '#adadad',opacity: 0.2,textAlign: 'center'}| No | Watermark style | | width | number | 220 | No | The width of each watermark | | height | number | 220 | No | Height of each watermark | | refresh | number | 5000 | No | The interval of refreshing the watermark can prevent the watermark from being tampered with, the unit is milliseconds, and it is recommended not to be less than 3000 milliseconds | | target |id\class\Node\Element|document.body| No |The parent element of the watermark|

How to use

Example

<template>
  <div>
    <span
      class="padding"
    >This is website content!</span>
  </div>
  
  <!-- waterMarker -->
  <VueWaterMarker
    :content="['water marker one', '__water marker two__', '~~~~~water marker three~~~~']"
  />
</template>

<script lang="ts">
import {defineComponent} from "vue"
import VueWaterMarker from 'vue-watermarker'
export default defineComponent({
  name: "App",
  components: {
    VueWaterMarker
  },
})
</script>

<style lang="scss" scoped>
.padding{
  font-size: 18px;
  padding: 10px;
}
</style>