# 滑块验证-js

**Repository Path**: TGODS/sliderVerif

## Basic Information

- **Project Name**: 滑块验证-js
- **Description**: pc 移动端 -js 滑块验证 自适应插件； 自适应自动跳转样式，修改样式，圆角，边框，背景，颜色等
- **Primary Language**: JavaScript
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 4
- **Forks**: 0
- **Created**: 2023-02-14
- **Last Updated**: 2024-02-02

## Categories & Tags

**Categories**: Uncategorized

**Tags**: Vue, JavaScript

## README

# pc 移动端 -js 滑块验证 自适应插件(支持 vue引入使用)(不支持IE)


### 更新：
> 2023.3.13： 1、优化传入this错误；2、_slider_bar 没有响应式修改样式；3、新增vue引入方式

<br/>

### 1、介绍
pc 移动端 -js 滑块验证 自适应插件； 自适应自动跳转样式，修改样式，圆角，边框，背景，颜色等

<br/>

插件地址: [https://gitee.com/TGODS/sliderVerif](https://gitee.com/TGODS/sliderVerif) 

<br/>


### 2、使用说明
<br/>

>普通引入： `<script src="./js/sliderVerif.js"></script>`

> vue 引入：`import sliderVerif from '../assets/js/sliderVerif`


<br/>

使用:
```js
#box 插入位置的类名或id   {} 参数

var box = new sliderVerif("#box", {
    sliderText: "请按住滑块拖动",// 滑块提示文字
    succText: "验证通过",// 滑块完成提示文字
    sliderTextColor: "#666",//滑块提示文字颜色
    succTextColor: "#fff",//滑块完成提示文字颜色
    fontSize: 1,//字体大小  数字/字符串 字符串可以带单位 ，数字默认单位 em

    /**
     * 盒子 样式
     */
    boxStyle: {
        bg: "#e5e5e5",//背景颜色  颜色名称，RGB,RGBA,16进制
        barBg: "#5abc3c",// 进度条 背景颜色   颜色名称，RGB,RGBA,16进制
        radius: 0,//按钮圆角   数字/字符串  字符串可以带单位，同 border-radius
        borderWidth: 0,//边框宽度  数字/字符串 字符串可以带单位
        borderColor: "#333",//边框颜色  颜色名称，RGB,RGBA,16进制
        borderStyle: "solid",//边框样式   同 css border-style 属性值
    },
    /**
     * 按钮 样式
     */
    btnStyle: {
        color: "#333",// 按钮 图标颜色   颜色名称，RGB,RGBA,16进制
        succColor: "#5abc3c",//滑动完成 图标颜色    颜色名称，RGB,RGBA,16进制
        bg: "#fff",//按钮背景颜色    颜色名称，RGB,RGBA,16进制
        succBg: "#fff",//滑动完成 背景颜色    颜色名称，RGB,RGBA,16进制
        radius: null,//按钮圆角   数字/字符串  字符串可以带单位，同 border-radius，不是数字和字符串，使用 boxStyle.radius
        borderWidth: 1,//边框宽度  数字/字符串 字符串可以带单位
        borderColor: "#e5e5e5",//边框颜色   颜色名称，RGB,RGBA,16进制
        borderStyle: "solid",//边框样式   同 css border-style 属性值
    },
    // 是否监听屏幕变化，自动修改响应式样式
    isResizeAutoStyle: false,
    //返回状态方法
    getCompleteState: (res) => {
        console.log(res);
    },
});
```

<br/>
<br/>




### 3、参数说明

参数名 | 参数作用 | 参数类型|默认值 | 描述/注意
:------ | :------|:------:|:------:|:------:
sliderText | 滑块提示文字 | String        |   请按住滑块拖动 | -
succText | 滑动完成提示文字 | String        |   验证通过     | -
sliderTextColor | 滑块提示文字颜色 | String        |   #666     |  颜色名称，RGB，RGBA，16进制
succTextColor | 滑动完成提示文字颜色 | String        |   #fff     |  颜色名称，RGB，RGBA，16进制
fontSize | 提示文字字体大小 | Number/String        |   1     |  数字:字体单位em，字符串：随便你写什么单位都行
isResizeAutoStyle | 是否监听屏幕变化，自动修改响应式样式 | Boolean | false | 监听屏幕变化，100ms ，响应式修改样式
|||| 盒子属性  boxStyle:{}
boxStyle.bg | 滑块背景颜色 | String | #e5e5e5 | 颜色名称，RGB，RGBA，16进制
boxStyle.barBg | 滑块进度背景颜色 | String | #5abc3c | 颜色名称，RGB，RGBA，16进制
boxStyle.radius | 滑块盒子 圆角 | Number/String | 0 | 数字:单位px，字符串：同 css border-radius
boxStyle.borderWidth | 滑块盒子 边框宽度 | Number/String | 0 | 数字:单位px
boxStyle.borderColor | 滑块盒子 边框颜色 | String | #333 | 颜色名称，RGB，RGBA，16进制
boxStyle.borderStyle | 滑块盒子 边框样式 | String | solid | 同 css border-style 属性值
|||| 按钮样式  btnStyle:{}
btnStyle.color | 按钮图标颜色 | String | #333 | 颜色名称，RGB，RGBA，16进制
btnStyle.succColor | 滑动完成按钮图标颜色 | String | #5abc3c | 颜色名称，RGB，RGBA，16进制
btnStyle.bg | 按钮背景颜色 | String | #fff | 颜色名称，RGB，RGBA，16进制
btnStyle.succBg | 滑动完成按钮背景颜色 | String | #fff | 颜色名称，RGB，RGBA，16进制
btnStyle.radius | 按钮圆角 | Number/String | null | 同 boxStyle.radius，不填写默认使用 boxStyle.radius
btnStyle.borderWidth | 按钮 边框宽度 | Number/String | 0 | 数字:单位px
btnStyle.borderColor | 按钮 边框颜色 | String | #333 | 颜色名称，RGB，RGBA，16进制
btnStyle.borderStyle | 按钮 边框样式 | String | solid | 同 css border-style 属性值
||||  getCompleteState:(res)=>{}
getCompleteState | 滑动完成返回方法 | function | function | 滑动完成，返回方法，res返回值  true/false



<br/>
<br/>



### 4、可用方法

1. 重置方法 ： `reset()`
2. 更新样式方法 ： `upStyle()` ，屏幕变化，会导致px样式无法完美还原样式，需要 这方法，重新设置px

列子
```js
 var box = new sliderVerif("#box");
 box.reset();
 box.upStyle();
```