SlideBox

滑动验证组件 / SlideBox

介绍

这是一个仿照淘宝注册的一个验证组件, 向右滑动到底部意味着用户确认协议可以继续向下进行. 组件一共有以下几种状态, 且状态只能维持其一, 且一下状态的切换由业务自己控制:

  • checking
  • cancelling
  • completing
  • failing

下面是组件的全部状态, 同一时间只能保持一个

  • inactive // 初始状态
  • sliding // 滑动状态
  • checking // 正在验证
  • cancelling // 释放状态
  • completing // 验证通过状态
  • failing // 验证失败状态

如何引入

// 引入
import { SlideBox } from 'vimo'
// 安装
Vue.component(SlideBox.name, SlideBox)
// 或者
export default{
  components: {
    SlideBox
 }
}

如果获取组件实例

  • 通过ref标记获取
  • 监听组件的onSlideEnd事件, 事件传递组件实例
源码:

对外事件 / Fires:

用法 / Usages

<p>向右滑动进入验证状态, 1s后重置</p>
<SlideBox @onSlideEnd="onSlideEndHandler"></SlideBox>

methods: {
   // 向右滑动进入验证状态, 4s后重置
   onSlideEndHandler (ins) {
     ins.checking()
     setTimeout(() => {
       ins.cancel()
     }, 1000)
   },
 }

方法 / Methods

(inner) cancel()

源码:

验证取消, 滑动到底部

(inner) checking()

源码:

进入验证状态

(inner) complete()

源码:

验证完成

(inner) fail()

源码:

验证失败, 等待2s后重置

事件 / Events

onSlideEnd

源码:
属性 / Properties:
Name Type Description
this VueComponent

组件实例

滚动到最右侧时触发