自定义指令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。
