如何在Vue中，當鼠標hover上元素時,給元素加遮罩層

介紹

當鼠標hover 上元素時,給元素加一層遮罩層。

效果圖

使用

import VueHoverMask from 'vue-hover-mask'
export default {
  components: {
    VueHoverMask
  }
}

示例

<template>
  <div id="app">
    <vue-hover-mask @click="handleClick">
      <!-- 默認插槽 -->
      <img src="https://cn.vuejs.org/images/logo.png" alt="" srcset="">
      <!-- action插槽 -->
      <template v-slot:action>
        <i class="iconfont icon-bianji-copy">編輯</i>
      </template>
    </vue-hover-mask>
  </div>
</template>

<script>
import VueHoverMask from './components/VueHoverMask'
export default {
  name: 'app',
  components:{ VueHoverMask },
  methods: {
    handleClick() {
      console.log('click')
    }
  }
}
</script>
<style>
@import url("//at.alicdn.com/t/font_1262845_52b6h42svd7.css");
.iconfont {
  font-size: 25px;
}
</style>

組件代碼

完整代碼請戳☞Vue-Components-Library/VueHoverMask

（完）