vue自定义指令：hover呈现光束

自定义指令directive的官方文档在这了：https://cn.vuejs.org/v2/guide/custom-directive.html，就不做那么多详细描述了，就直接上例子吧！
directive.js

import '../common/style/light.scss'
const vueLight = {}
vueLight.install = (Vue) => {
    Vue.directive('light', {
        bind(el) {
            el && el.classList.add('lightPos')
        }
    })
}

export default vueLight

light.scss

.lightPos {
    overflow: hidden;
    position: relative;
    &::before {
      content: "";
      background-color: rgba(255, 255, 255, 0.3);
      height: 100%;
      width: 2em;
      display: block;
      position: absolute;
      top: 0;
      left: -100%;
      transform: skewX(-45deg) translateX(0);
      transition: none;
      z-index: 1;
    }
    &:hover::before {
      left: 200%;
      transform: skewX(-45deg);
      transition: all 1s ease-in-out;
    }
  }

然后在main.js里引入

import vueLight from './utils/directive'
Vue.use(vueLight)

下面是效果图，hover的时候光束会从左到右滑动

image.png

好了，自定义指令hover就写完了，接下来就是直接在想要的元素上引入v-light就行了，如果效果不明显，可以自己调CSS。