npm 包 vue-elevator 使用教程

简介

vue-elevator 是一个 Vue 的电梯组件，支持滚动到指定位置，同时支持点击取消滚动功能。它的功能强大，使用简单，兼容性好，非常适用于 Vue 电梯导航等场景。

安装

--- ------- ------------ ------

使用

在 Vue 项目中引入 vue-elevator 的组件：

------ -------- ---- --------------

------ ------- -
  ----------- - -------- -
-

在 <template> 中使用 vue-elevator 的组件：

--------- -------------------------

组件API

vue-elevator 提供了以下 API：

• speed：滚动速度，单位为毫秒，默认值为 1000
• easing：滚动方式，支持 easeInQuad，easeOutQuad， easeInOutQuad， easeInCubic， easeOutCubic，easeInOutCubic，easeInQuart，easeOutQuart，easeInOutQuart，easeInQuint，easeOutQuint，easeInOutQuint，easeInSine，easeOutSine，easeInOutSine，easeInExpo，easeOutExpo，easeInOutExpo，easeInCirc，easeOutCirc，easeInOutCirc，easeInBack，easeOutBack，easeInOutBack，easeInElastic，easeOutElastic，easeInOutElastic，easeInBounce，easeOutBounce，easeInOutBounce，默认为 easeInOutCubic
• bottomOffset：距离底部的偏移量，默认为 0
• duration：滚动的持续时间，默认为 500

示例代码

下面是一个简单的示例代码，包括了 vue-elevator 的使用以及一些常用 API：

----------
  -----
    -----------------
    --------- ------------- ----------------------- ------------------ --------------------------
  ------
-----------

--------
  ------ -------- ---- --------------

  ------ ------- -
    ----------- -
      --------
    -
  -
---------

------ -------
  -- -
    ----------- ------- -- -------------- --
  -
--------

结语

vue-elevator 是一个非常实用的 Vue 组件，能够帮助我们实现电梯导航等功能。同时，它的使用和 API 非常简单，开发者能够快速上手。希望本文能够对你有所帮助！

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005626181e8991b448dfa52