Vue实现页面添加水印功能

下面我来详细讲解一下“Vue实现页面添加水印功能”的完整攻略。

步骤一：安装依赖

首先需要安装一个npm包，名为watermark-dom，这个包可以用来在DOM元素上添加水印。通过以下命令安装：

npm install watermark-dom --save

步骤二：创建组件

接下来需要创建一个组件，可以称之为Watermark，表示页面上添加水印的区域。这个组件可以在父组件中使用，作为另外一个组件内的一个子组件。该组件的代码如下：

<template>
  <div class="watermark-container">
    <div v-for="(item, index) in watermarks" :key="index" class="watermark-item" :style="item.style">{{ item.text }}</div>
  </div>
</template>

<script>
import watermark from 'watermark-dom';

export default {
  name: 'Watermark',
  data () {
    return {
      watermarks: [],
    };
  },
  mounted () {
    this.initWatermark();
  },
  methods: {
    initWatermark () {
      const wm = watermark({
        container: this.$refs.container,
        width: 200,
        height: 120,
        text: 'WATERMARK',
        font: '36px Microsoft YaHei',
        color: 'rgba(0, 0, 0, 0.1)',
        rotate: 15,
      });

      this.watermarks.push({
        text: wm.innerText,
        style: {
          position: 'absolute',
          top: `${wm.offsetTop}px`,
          left: `${wm.offsetLeft}px`,
          width: `${wm.offsetWidth}px`,
          height: `${wm.offsetHeight}px`,
          transform: `${wm.style.transform}`,
          zIndex: 1000,
        },
      });
    },
  },
};
</script>

<style scoped>
.watermark-container {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
}

.watermark-container .watermark-item {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>

在该组件中，我们借助了videojs这个库来实现水印的添加，首先在mounted钩子函数中调用initWatermark方法来初始化。在initWatermark方法中，我们调用了watermark-dom库的watermark方法，该方法会生成一个水印并返回生成后的DOM元素。我们将水印生成后的DOM元素中的文本和样式信息存储在watermarks数组中，并在v-for指令中遍历该数组，渲染每一个水印。

步骤三：在需要添加水印的页面中使用组件

在需要添加水印的页面中，可以将Watermark组件当做普通的子组件引用。例如，在一个名为App的父组件中，可以通过以下方式引用：

<template>
  <div>
    <watermark />
  </div>
</template>

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

export default {
  name: 'App',
  components: {
    Watermark,
  },
};
</script>

这样，在App组件的模板中，就会渲染出一个名为Watermark的子组件，并且该子组件会给页面添加水印。

示例一：在登录页面中添加水印

以下是在登录页面中添加水印的代码示例：

<template>
  <div>
    <watermark />
    <form>
      <input type="text" placeholder="用户名">
      <input type="password" placeholder="密码">
      <button type="submit">登录</button>
    </form>
  </div>
</template>

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

export default {
  name: 'Login',
  components: {
    Watermark,
  },
};
</script>

在上面的示例代码中，我们在登录页面中引入了Watermark组件，并且将该组件置于form标签之前，这样在登录页面中就可以添加水印了。

示例二：在视频播放页面中添加水印

以下是在视频播放页面中添加水印的代码示例：

<template>
  <div>
    <watermark />
    <video class="video-js vjs-default-skin vjs-big-play-centered" controls :options="playerOptions" ref="video"></video>
  </div>
</template>

<script>
import Watermark from './components/Watermark.vue';
import videojs from 'video.js';
import 'video.js/dist/video-js.css';

export default {
  name: 'VideoPlayer',
  components: {
    Watermark,
  },
  data () {
    return {
      player: null,
      playerOptions: {
        autoplay: false,
        sources: [
          {
            src: 'https://vjs.zencdn.net/v/oceans.mp4',
            type: 'video/mp4',
          },
        ],
      },
    };
  },
  mounted () {
    this.player = videojs(this.$refs.video, this.playerOptions);
  },
  beforeDestroy () {
    if (this.player) {
      this.player.dispose();
      this.player = null;
    }
  },
};
</script>

在上面的示例代码中，我们在视频播放页面中引入了Watermark组件，并且将该组件置于video标签之前，这样在视频播放页面中就可以添加水印了。

这就是如何使用Vue来实现页面添加水印的完整攻略，希望能对你有所帮助。