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