金合前端 - 滑动图片验证组件

Vue3 + TS

• npm i jh-slider-valid

• 或pnpm add jh-slider-valid

• 或yarn add jh-slider-valid

• import jh-slider-valid from 'jh-slider-valid'

引入样式

• import 'jh-slider-valid/dist/style.css'

• Props

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

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

金合研究院

金合开发者平台