iking-slider-valid/README.md

金合前端组件

<!--
 * @Author: wfl
 * @LastEditors: wfl
 * @description: 
 * @updateInfo: 
 * @Date: 2022-07-26 12:14:10
 * @LastEditTime: 2022-08-01 11:25:23
-->
# 金合前端 - 滑动图片验证组件

`Vue3 + TS`

- `npm i iking-slider-valid`
- 或`pnpm add iking-slider-valid`
- 或`yarn add iking-slider-valid`

- `import IkingSliderValid from 'iking-slider-valid'`

引入样式

- `import 'iking-slider-valid/dist/style.css'`

- Props

```javascript
interface Props {
  width: number; // 宽度
  height: number; // 高度
  show: boolean;// 是否显示
  sliderSize: number; // 滑块大小
  scale: number; // 滑块缩放比例
  range: number; // 误差范围
  images: string[] | null; // 自定义图片数组
  successText: string; // 校验通过文字
  failText: string; // 校验失败文字
  sliderText: string; // 滑块文字
  padding: number; // 内边距
  el: HTMLBaseElement | string //CSS 选择器字符串或者一个真实的 DOM 节点
}

// 默认值
const props = withDefaults(defineProps<Props>(), {
  width: 320,
  height: 170,
  show: false,
  sliderSize: 30,
  scale: 1,
  range: 10,
  images: () => null,
  successText: "验证成功",
  failText: "验证失败",
  sliderText: "拖动滑块完成验证",
  padding: 15,
  el: 'body'
});
```

- Emits

```javascript
  const emits = defineEmits<{
    (e: 'success', x: number): void;
    (e: 'fail', x: number): void;
    (e: 'close'): void;
  }>()
```

## 金合研究院

[金合开发者平台](http://wfl118.cn/)