快捷導(dǎo)航

Vue實(shí)現(xiàn)頁(yè)面添加滿屏水印和去除水印功能

更新時(shí)間：2024年07月17日 10:14:25 作者：前端小助手

在一些特殊的應(yīng)用場(chǎng)景中,可能需要在網(wǎng)頁(yè)上添加水印以保護(hù)版權(quán)或標(biāo)識(shí)信息,本文將介紹如何在Vue項(xiàng)目中添加滿屏水印并實(shí)現(xiàn)去除水印的功能,文中通過(guò)代碼示例講解的非常詳細(xì),需要的朋友可以參考下

1. 前言

在一些特殊的應(yīng)用場(chǎng)景中，可能需要在網(wǎng)頁(yè)上添加水印以保護(hù)版權(quán)或標(biāo)識(shí)信息。本文將介紹如何在Vue項(xiàng)目中添加滿屏水印并實(shí)現(xiàn)去除水印的功能。

2. 添加滿屏水印

2.1 創(chuàng)建水印組件

首先，我們需要?jiǎng)?chuàng)建一個(gè)水印組件，該組件會(huì)在頁(yè)面上生成一個(gè)滿屏的水印。

<!-- Watermark.vue -->
<template>
  <div class="watermark" ref="watermark"></div>
</template>

<script>
export default {
  props: {
    text: {
      type: String,
      required: true
    }
  },
  mounted() {
    this.addWatermark(this.text);
  },
  methods: {
    addWatermark(text) {
      const watermarkDiv = this.$refs.watermark;
      const canvas = document.createElement('canvas');
      canvas.width = 200;
      canvas.height = 200;

      const ctx = canvas.getContext('2d');
      ctx.rotate(-20 * Math.PI / 180);
      ctx.font = '20px Arial';
      ctx.fillStyle = 'rgba(200, 200, 200, 0.50)';
      ctx.textAlign = 'center';
      ctx.textBaseline = 'middle';
      ctx.fillText(text, canvas.width / 2, canvas.height / 2);

      watermarkDiv.style.backgroundImage = `url(${canvas.toDataURL('image/png')})`;
      watermarkDiv.style.pointerEvents = 'none';
      watermarkDiv.style.position = 'fixed';
      watermarkDiv.style.top = 0;
      watermarkDiv.style.left = 0;
      watermarkDiv.style.width = '100%';
      watermarkDiv.style.height = '100%';
      watermarkDiv.style.zIndex = 9999;
    }
  }
};
</script>

<style scoped>
.watermark {
  background-repeat: repeat;
}
</style>

2.2 在頁(yè)面中使用水印組件

將水印組件引入到需要添加水印的頁(yè)面，并在模板中使用。

<template>
  <div>
    <Watermark text="這是一個(gè)水印"></Watermark>
    <!-- 你的其他頁(yè)面內(nèi)容 -->
  </div>
</template>

<script>
import Watermark from './components/Watermark.vue';

export default {
  components: {
    Watermark
  }
};
</script>

示例效果

3. 去除水印

為了去除水印，我們可以使用一個(gè)簡(jiǎn)單的方法來(lái)控制水印組件的顯示和隱藏。

3.1 修改Watermark組件以支持動(dòng)態(tài)顯示

在水印組件中添加一個(gè)v-if指令，以便動(dòng)態(tài)控制其顯示和隱藏。

<!-- Watermark.vue -->
<template>
  <div class="watermark" v-if="visible" ref="watermark"></div>
</template>

<script>
export default {
  props: {
    text: {
      type: String,
      required: true
    },
    visible: {
      type: Boolean,
      default: true
    }
  },
  mounted() {
    this.addWatermark(this.text);
  },
  methods: {
    addWatermark(text) {
      const watermarkDiv = this.$refs.watermark;
      const canvas = document.createElement('canvas');
      canvas.width = 200;
      canvas.height = 200;

      const ctx = canvas.getContext('2d');
      ctx.rotate(-20 * Math.PI / 180);
      ctx.font = '20px Arial';
      ctx.fillStyle = 'rgba(200, 200, 200, 0.50)';
      ctx.textAlign = 'center';
      ctx.textBaseline = 'middle';
      ctx.fillText(text, canvas.width / 2, canvas.height / 2);

      watermarkDiv.style.backgroundImage = `url(${canvas.toDataURL('image/png')})`;
      watermarkDiv.style.pointerEvents = 'none';
      watermarkDiv.style.position = 'fixed';
      watermarkDiv.style.top = 0;
      watermarkDiv.style.left = 0;
      watermarkDiv.style.width = '100%';
      watermarkDiv.style.height = '100%';
      watermarkDiv.style.zIndex = 9999;
    }
  }
};
</script>

3.2 動(dòng)態(tài)控制水印顯示

在頁(yè)面中通過(guò)數(shù)據(jù)綁定控制水印的顯示和隱藏。

<template>
  <div>
    <button @click="toggleWatermark">切換水印</button>
    <Watermark :text="watermarkText" :visible="watermarkVisible"></Watermark>
    <!-- 你的其他頁(yè)面內(nèi)容 -->
  </div>
</template>

<script>
import Watermark from './components/Watermark.vue';

export default {
  components: {
    Watermark
  },
  data() {
    return {
      watermarkText: '這是一個(gè)水印',
      watermarkVisible: true
    };
  },
  methods: {
    toggleWatermark() {
      this.watermarkVisible = !this.watermarkVisible;
    }
  }
};
</script>

4. 總結(jié)

通過(guò)本文的介紹，我們學(xué)習(xí)了如何在Vue項(xiàng)目中添加滿屏水印，并實(shí)現(xiàn)動(dòng)態(tài)控制水印的顯示和隱藏。使用Canvas生成水印圖像，再通過(guò)CSS樣式實(shí)現(xiàn)水印的全屏覆蓋，可以有效保護(hù)網(wǎng)頁(yè)內(nèi)容。

以上就是Vue實(shí)現(xiàn)頁(yè)面添加滿屏水印和去除水印功能的詳細(xì)內(nèi)容，更多關(guān)于Vue頁(yè)面添加和去除水印的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: