https://github.com/symind/vue-sliding-button

一个 Vue 的滑动按钮组件，拥有优雅的惯性与回弹动画。
https://github.com/symind/vue-sliding-button

vue vuejs

Last synced: 2 months ago
JSON representation

一个 Vue 的滑动按钮组件，拥有优雅的惯性与回弹动画。

• Host: GitHub
• URL: https://github.com/symind/vue-sliding-button
• Owner: SyMind
• License: mit
• Created: 2018-03-16T00:21:01.000Z (about 7 years ago)
• Default Branch: master
• Last Pushed: 2022-12-03T22:01:08.000Z (over 2 years ago)
• Last Synced: 2024-10-20T05:17:53.951Z (8 months ago)
• Topics: vue, vuejs
• Language: JavaScript
• Homepage:
• Size: 2.55 MB
• Stars: 24
• Watchers: 3
• Forks: 2
• Open Issues: 17
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# vue-better-slider

> 一个 Vue 的滑动按钮组件，拥有优雅的惯性与回弹动画，有关动画方面的处理借鉴 better-scroll 的实现。

[在线例子](https://symind.github.io/vue-better-slider/index.html)

![二维码](https://symind.github.io/static/image/vue-sliding-button-qr-code.png)

# 起步

## 安装

``` bash

npm i --save vue-sliding-button

```

## 引入

``` js

import Vue from 'vue'

import SlidingButton from 'vue-sliding-button'

Vue.use(SlidingButton)

```

## 使用

``` html

    


      

        


          前面的内容

        

        


          后面的内容

        

      

    


```

# 原理

## 布局

![布局](https://symind.github.io/static/image/vue-sliding-button-layout.png)

绿色部分为 wrapper，它拥有两个子元素为 back 和 front，它的高度会被 front 撑起。黄色部分为 back，它使用**绝对定位**，它的高度与 wrapper 相同，值得注意的是为了提高性能，back 在用户触摸该控件是才被插入。front 与 back 同级。

## 关闭

组件提供关闭动画，调用组件的 close 方法使用，可以通过监听 clickBackEvent 等事件，通过传入的组件引用已调用该方法。需要注意的是，该方法并不会删除该组件，可以通过监听 closeTransitionEndEvent 事件，在其中进行自己的处理。

# 选项

SlidingButton 支持很多属性。

## right

* 类型：Number

* 默认值：80

* 作用：从左向右滑动时，右边展示宽度

## left

* 类型：Number

* 默认值：80

* 作用：从右向左滑动时，左边展示宽度

## rightBackgroundColor

* 类型：Number

* 默认值：80

* 作用：从左向右滑动时，组件底色，主要用于关闭动画

## leftBackgroundColor

* 类型：Number

* 默认值：0

* 作用：从右向左滑动时，组件底色，主要用于关闭动画

## momentum

* 类型：Boolean

* 默认值：true

* 作用：表示是否开启惯性动画

## momentumTime

* 类型：Number

* 默认值：100

* 作用：表示惯性动画持续时间

## deceleration

* 类型：Number

* 默认值：0.01

* 作用：表示惯性动画的减速度

## closeTime

* 类型：Number

* 默认值：300

* 作用：表示关闭动画的持续时间

## trigger

* 类型：Boolean

* 默认值：true

* 作用：该属性为 true 或 false 并无区别，只要该值发生改变，且用户没有触摸该组件时，就会将组件的 front 置于原始位置。当在列表中使用多个该组件时，可以使用该属性。

# 事件

注意：event 是事件原生参数，component 是指向该组件的引用。

## clickBackEvent

* 参数：{ Object }.{ event, component }

* 触发时机：用户点击 back 时

## clickFrontEvent

* 参数：{ Object }.{ event, component }

* 触发时机：用户点击 front 时

## touchStartEvent

* 参数：{ Object }.{ event, component }

* 触发时机：用户开始触摸该组件时

## closeTransitionEndEvent

* 参数：{ Object }.{ event, component }

* 触发时机：关闭动画结束时调用