vue輕松實(shí)現(xiàn)水印效果

更新時(shí)間：2021年09月03日 11:27:53 作者：浩星

這篇文章主要為大家詳細(xì)介紹了vue輕松實(shí)現(xiàn)水印效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

前言：

vue項(xiàng)目中使用水印效果，可指定容器

效果圖：

1、不指定容器

2、指定容器

實(shí)現(xiàn)方法：

1、新建一個(gè)配置文件 watermark.js ，可放util，也可放別的地方

let watermark = {}
 
let setWatermark = (text, sourceBody) => {
  let id = Math.random()*10000+'-'+Math.random()*10000+'/'+Math.random()*10000
 
  if (document.getElementById(id) !== null) {
    document.body.removeChild(document.getElementById(id))
  }
 
  let can = document.createElement('canvas')
  can.width = 150
  can.height = 120
 
  let cans = can.getContext('2d')
  cans.rotate(-20 * Math.PI / 180)
  cans.font = '15px Vedana'
  cans.fillStyle = 'rgba(0, 0, 0, .5)'
  cans.textAlign = 'left'
  cans.textBaseline = 'Middle'
  cans.fillText(text, can.width / 20, can.height )
 
  let water_div = document.createElement('div')
  water_div.id = id
  water_div.style.pointerEvents = 'none'
  water_div.style.background = 'url(' + can.toDataURL('image/png') + ') left top repeat'
  if(sourceBody){
    water_div.style.width = '100%'
    water_div.style.height = '100%'
    sourceBody.appendChild(water_div)
  }else{
    water_div.style.top = '3px'
    water_div.style.left = '0px'
    water_div.style.position = 'fixed'
    water_div.style.zIndex = '100000'
    water_div.style.width = document.documentElement.clientWidth  + 'px'
    water_div.style.height = document.documentElement.clientHeight  + 'px'
    document.body.appendChild(water_div)
  }
 
  return id
}
 
/**
 *  該方法只允許調(diào)用一次
 *  @param:
 *  @text == 水印內(nèi)容
 *  @sourceBody == 水印添加在哪里，不傳就是body
 * */
watermark.set = (text, sourceBody) => {
  let id = setWatermark(text, sourceBody)
  setInterval(() => {
    if (document.getElementById(id) === null) {
      id = setWatermark(text, sourceBody)
    }
  }, 2000)
  window.onresize = () => {
    setWatermark(text, sourceBody)
  }
}
 
export default watermark

2、在main.js中全局配置

// 水印
import watermark from './utils/watermark.js'
Vue.prototype.$watermark = watermark

3、頁(yè)面中使用-全屏水印

this.$watermark.set("浩星2731")

4、頁(yè)面中使用-指定容器

<el-button @click="addWatermark">點(diǎn)我添加水印</el-button>
<div ref="content" style="width: 500px;height: 500px;border: 1px solid #ccc;">
 addWatermark(){
      this.$watermark.set("浩星2731",this.$refs.content)
    }

5、如果覺(jué)得字體之間的距離太大了，改這個(gè)屬性就行了

can.width = 150
can.height = 120

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

vue
水印

相關(guān)文章

詳解vue-property-decorator使用手冊(cè)
這篇文章主要介紹了vue-property-decorator使用手冊(cè)，文中較詳細(xì)的給大家介紹了他們的用法，通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2019-07-07
vue設(shè)置頁(yè)面背景及背景圖片簡(jiǎn)單示例
這篇文章主要給大家介紹了關(guān)于vue設(shè)置頁(yè)面背景及背景圖片的相關(guān)資料,在Vue項(xiàng)目開(kāi)發(fā)中我們經(jīng)常要向頁(yè)面中添加背景圖片,文中通過(guò)代碼示例介紹的非常詳細(xì),需要的朋友可以參考下
2023-08-08
vue引入外部的js文件的10種方法總結(jié)
這篇文章主要為大家詳細(xì)介紹了vue項(xiàng)目中引入外部的js文件的10種方法,文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,需要的小伙伴可以參考下
2023-08-08
vue中使用定義好的變量設(shè)置css樣式詳解
vue項(xiàng)目中我們可以通過(guò)行內(nèi)樣式進(jìn)行動(dòng)態(tài)修改樣式,下面這篇文章主要給大家介紹了關(guān)于vue中如何使用定義好的變量設(shè)置css樣式的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-03-03
vue-meta實(shí)現(xiàn)router動(dòng)態(tài)設(shè)置meta標(biāo)簽的方法
這篇文章主要介紹了vue-meta實(shí)現(xiàn)router動(dòng)態(tài)設(shè)置meta標(biāo)簽,實(shí)現(xiàn)思路非常簡(jiǎn)單內(nèi)容包括mata標(biāo)簽的特點(diǎn)和mata標(biāo)簽共有兩個(gè)屬性，分別是http-equiv屬性和name屬性，本文通過(guò)實(shí)例代碼給大家詳細(xì)講解需要的朋友可以參考下
2022-11-11
詳解Vue3如何優(yōu)雅的加載大量圖片
最近開(kāi)發(fā)了一個(gè)功能,頁(yè)面首頁(yè)會(huì)加載大量的圖片,初次進(jìn)入頁(yè)面時(shí),會(huì)導(dǎo)致頁(yè)面性能下降,于是乎,我改進(jìn)了這個(gè)功能,可以讓所有圖片自動(dòng)懶加載,文中有詳細(xì)的代碼示例,需要的朋友可以參考下
2023-09-09
Vue中圖片上傳組件封裝-antd的a-upload二次封裝的實(shí)例
這篇文章主要介紹了Vue中圖片上傳組件封裝-antd的a-upload二次封裝的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-09-09
axios如何取消重復(fù)無(wú)用的請(qǐng)求詳解
這篇文章主要給大家介紹了關(guān)于axios如何取消重復(fù)無(wú)用的請(qǐng)求的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用axios具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-12-12
elementUI Tree 樹形控件單選實(shí)現(xiàn)示例
在ElementUI中樹形控件本身不支持單選功能,本文就來(lái)介紹一下如何實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2024-06-06
在Vue項(xiàng)目中使用snapshot測(cè)試的具體使用
這篇文章主要介紹了在Vue項(xiàng)目中使用snapshot測(cè)試的具體使用，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2019-04-04