在前端开发中，经常需要实现一些鼠标移动到某个元素上时的特效，比如鼠标移动到图片上时图片有一个方向的倾斜动画，这个时候我们可以使用 vue-direction-hover 这个 npm 包来实现。
1. 安装
npm install vue-direction-hover --save
2. 使用
2.1. 引入
在你的 Vue 项目入口文件或某个组件文件中，引入 vue-direction-hover：
import VueDirectionHover from 'vue-direction-hover' Vue.use(VueDirectionHover)
2.2. 基本使用
在需要实现特效的元素上绑定 v-direction-hover 指令，并传入特效参数：
<div v-direction-hover="'left'">鼠标移动到我上面时会有左侧倾斜动画</div>
2.3. 参数说明
有四个可用参数：
'left'：鼠标移动到元素上时有左倾斜动画。'right'：鼠标移动到元素上时有右倾斜动画。'top'：鼠标移动到元素上时有上倾斜动画。'bottom'：鼠标移动到元素上时有下倾斜动画。
还可以传一个可选参数 duration，控制动画过渡时间，默认为 0.3s：
<div v-direction-hover="{value: 'bottom', duration: '0.5s'}">鼠标移动到我上面时会有下侧倾斜动画</div>2.4. 事件回调
可以在元素上绑定 v-on:direction-hover-start 和 v-on:direction-hover-end 事件回调函数，当鼠标移动到元素上时会触发 direction-hover-start 事件，当鼠标移出元素时会触发 direction-hover-end 事件，可用于控制其他组件的效果：
<div v-direction-hover="'top'"
v-on:direction-hover-start="onDirectionHoverStart"
v-on:direction-hover-end="onDirectionHoverEnd">
鼠标移动到我上面时会有上侧倾斜动画
</div>methods: {
onDirectionHoverStart() {
console.log('鼠标移动到元素上')
},
onDirectionHoverEnd() {
console.log('鼠标从元素上移开')
}
}3. 示例代码
-- -------------------- ---- -------
----------
-----
---- ----------------------
---- ------------------
--------------------------
--------------------------------------------------
-----------------------------------------------
-----------------
------
---- ------------------
-------------------------- ------ --------- --------
--------------------------------------------------
-----------------------------------------------
-----------------
------
---- ------------------
---------------------------
--------------------------------------------------
-----------------------------------------------
-----------------
------
---- ------------------
----------------------------
--------------------------------------------------
-----------------------------------------------
-----------------
------
------
------
-----------
--------
------ ------- -
-------- -
----------------------- -
-----------------------
--
--------------------- -
-----------------------
-
-
-
---------
------ -------
-------------- -
-------- -----
---------------- --------------
----------- -----
-
----------- -
------ ------
------- -----
------------ -----
----------- -------
---------- -----
----------------- -----
-------------- ----
----------- - --- ---- ------- -- -- ------
-
--------4. 结语
vue-direction-hover 是一个轻便和易于使用的 npm 包，可以帮助你更轻松地实现一些常见的特效。希望本文能够对你有所帮助，谢谢收看。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562d181e8991b448e01bd