更新记录

1.0.0（2023-07-12） 下载此版本

1.0.0

平台兼容性

uni-app

预览

概述

基于uni-app开发的滑动验证码组件

主要功能

滑动验证码

演示

<template>
  <view>
    <o-code
      v-show="show"
      :bg="bg" 
      :slider="slider"
      closeable
      closeOnClickOverlay
      :overlayOpacity="0.3"
      :channelText="'滑动完成验证'"
      endToStart
      @change="changeCode"
      @close="closeCode"
      @refresh="refreshCode"
    ></o-code>
  </view>
</template>
<script>
import OCode from '../../component/o-code/o-code.vue';
import imgInfo from './base64Img';
export default {
  components: { OCode },
  data() {
    return {
      show: true,
      bg: {
        src: imgInfo.bgImg,// 背景图片路径
        width: 240, // 背景图片大小
        height: 150,
        mode: "aspectFit" // 显示模式
      },
      slider: {
        src: imgInfo.slider,// 滑块图片路径
        y: imgInfo.scale * 150, // y轴坐标，这里是根据我自己的后端返回的滑块位置计算方式，根据自己情况而定，如果后端固定y就直接赋值
        width: 40, // 滑块大小
        height: 40
      },
    }
  },
  methods: {
    changeCode({x, y}){
      console.log(`x轴移动了：${x}，y轴不变：${y}`);
    },
    closeCode(e){
      console.log('关闭弹窗');
      this.show = false;
    },
    refreshCode(e){
      console.log('点击了刷新按钮');
    }
  }
}
</script>

API

Props

Events

Slot