pb-component-vue2

• 滑块组件 slide
• 图标组件 icon

Quick Start

1. Import pb-component-vue2 into your vue2.js project.

Using build tools:

npm install pb-component-vue2 --save

yarn add pb-component-vue2 --save

import Vue from 'vue';
import pbComponent from 'pb-component-vue2';

Vue.use(pbComponent);

2. Now you have it. The simplest usage:

<pb-icon icon="refresh" color="orange" size="26"></pb-icon>

icon argument

| Param | Type | Describe | Version | |:-----------:|:-------:|:------------------------:|:-------:| | icon | String | name | 1.0 | | size | Number/String | size | 1.0 | | className | Number | class | 1.0 |

slide argument

| Param | Type | Describe | Version | |:-----------:|:-------:|:--------------------------:|:-------:| | l | Number | block length | 1.0 | | r | Number | block circle radius | 1.0 | | width | Number | canvas width | 1.0 | | height | Number | canvas height | 1.0 | | sliderText | String | Slide filled right | 1.0 | | loadingText | String | loading text | 1.0 | | images | Array | picture array 背景图数组，默认值 [] | 1.0 | | accuracy | Number | 滑动验证的误差范围，默认值 5 | 1.0 | | show | Boolean | 是否显示刷新按钮，默认值 true | 1.0 |

内置方法

• 在父组件里如果需要重置，可以在父组件中调用子组件reset() 方法

<pb-slide-verification ref="slideBlock"></pb-slide-verification>

this.$refs.slideBlock.reset();

<div style="width: 360px;margin: 100px auto">
  <pb-slide-verification ref="slideBlock" :images="images" @success="onSuccess" @again="onAgain" @fulfilled="onFulfilled" @fail="onFail" @refresh="onRefresh"
                         :accuracy="accuracy"></pb-slide-verification>
  <div>{{ msg }}</div>
  <button class="btn" @click="handleClick">在父组件可以点我刷新哦</button>
</div>

examples

export default {
  name: 'App',
  data() {
    return {
      msg: '',
      images: [
        img1,
        img2,
        img3,
      ],
      accuracy: 5, // 精确度小，可允许的误差范围小；为1时，则表示滑块要与凹槽完全重叠，才能验证成功。默认值为5
    }
  },
  methods: {
    onSuccess(times) {
      console.log('验证通过');
      this.msg = `login success, 耗时${(times / 1000).toFixed(1)}s`;
    },
    onFail() {
      console.log('验证不通过');
      this.msg = ''
    },
    onRefresh() {
      console.log('点击了刷新小图标');
      this.msg = ''
    },
    onFulfilled() {
      console.log('刷新成功啦！');
    },
    onAgain() {
      console.log('检测到非人为操作的哦！');
      this.msg = 'try again';
      // 刷新
      this.handleClick();
    },
    handleClick() {
      this.$refs.slideBlock.reset();
      this.msg = ''
    },
  }
}

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build