npm 包 vue-elevator 使用教程-JavaScript中文网-JavaScript教程资源分享门户

简介

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

安装

npm install vue-elevator --save

使用

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

import Elevator from 'vue-elevator'

export default {
  components: { Elevator }
}

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

<elevator :speed="1000"></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