Vue自定义指令入门：轻松实现水波纹和水印效果

前端

2023-09-05 11:06:14

开发过程中，我们经常会遇到一些重复性、费时费力的工作。为了提高效率，我们可以使用各种工具函数和代码规范来简化和标准化开发流程。本文将分享两个实用的Vue自定义指令：点击水波效果和简易水印效果。

一、点击水波效果指令

点击水波效果指令可以为元素添加水波纹效果。当用户点击元素时，元素周围会出现一圈扩散的水波纹，就像往平静的水面上丢了一块石头。

1. 实现原理

水波纹效果的实现原理很简单，就是通过CSS动画来模拟水波纹的扩散过程。具体步骤如下：

为元素添加一个水波纹容器元素。
在水波纹容器元素中添加一个水波纹元素。
为水波纹元素添加CSS动画，使其从中心向四周扩散。
当用户点击元素时，触发水波纹容器元素的CSS动画。

2. 代码实现

<template>
  <div @click="showRipple">
    <div class="ripple-container">
      <div class="ripple"></div>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    showRipple() {
      this.$refs.rippleContainer.classList.add('ripple-animate');
      setTimeout(() => {
        this.$refs.rippleContainer.classList.remove('ripple-animate');
      }, 500);
    }
  }
}
</script>

<style>
.ripple-container {
  position: relative;
  overflow: hidden;
}

.ripple {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 50%;
  opacity: 0;
  transform: scale(0);
}

.ripple-animate {
  animation: ripple-effect 500ms linear;
}

@keyframes ripple-effect {
  from {
    opacity: 0;
    transform: scale(0);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
</style>

二、简易水印效果指令

简易水印效果指令可以为元素添加水印效果。水印效果通常用于保护版权或防止图像被盗用。

1. 实现原理

简易水印效果的实现原理也很简单，就是将水印图像叠加在元素上。具体步骤如下：

为元素添加一个水印图像元素。
将水印图像元素的透明度降低，使其看起来像水印一样。
将水印图像元素的位置设置为绝对定位，使其始终位于元素的顶部。

2. 代码实现

<template>
  <div>
    <div class="watermark-container">
      <img src="watermark.png" alt="Watermark" class="watermark">
    </div>
  </div>
</template>

<style>
.watermark-container {
  position: relative;
}

.watermark {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.2;
}
</style>