VueHoverMask的文档

VueHoverMask是一个Vue.js组件，可以实现鼠标悬停在元素上时，在该元素上覆盖一层遮罩，以实现一些动画效果或交互效果。

使用方法：

安装VueHoverMask：

npm install vue-hover-mask --save

在Vue.js应用程序中引入VueHoverMask：

import VueHoverMask from "vue-hover-mask";

Vue.component("vue-hover-mask", VueHoverMask);

在Vue.js模板中使用VueHoverMask：

<vue-hover-mask>
  <div class="card">
    <h2>Card Title</h2>
    <p>Card Content</p>
  </div>
</vue-hover-mask>

可选属性：

maskColor：遮罩的颜色，默认为#000000。
transitionDuration：遮罩动画的持续时间，默认为0.3s。
transitionTimingFunction：遮罩动画的缓动函数，默认为ease-in-out。

<vue-hover-mask
  maskColor="#ff0000"
  transitionDuration="0.5s"
  transitionTimingFunction="linear"
>
  <div class="card">
    <h2>Card Title</h2>
    <p>Card Content</p>
  </div>
</vue-hover-mask>

完整示例代码：

<template>
  <div>
    <vue-hover-mask maskColor="#ff0000" transitionDuration="0.5s">
      <div class="card">
        <h2>Card Title</h2>
        <p>Card Content</p>
      </div>
    </vue-hover-mask>
  </div>
</template>

<script>
import VueHoverMask from "vue-hover-mask";

export default {
  components: {
    VueHoverMask,
  },
};
</script>

<style>
.card {
  width: 300px;
  height: 200px;
  background-color: #ffffff;
  border: 1px solid #cccccc;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.vue-hover-mask {
  position: relative;
}

.vue-hover-mask .mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000000;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.vue-hover-mask:hover .mask {
  opacity: 0.5;
}
</style>
``