金合前端 - 滑动验证组件

Vue3 + TS

• npm i iking-drag-valid

• 或pnpm add iking-drag-valid

• 或yarn add iking-drag-valid

• import IkingDragValid from 'iking-drag-valid'

引入样式

• import 'iking-drag-valid/dist/style.css'

• Props

interface Props {
  value: PropType<boolean>
  isSlot: PropType<boolean>
  text: PropType<string>
  successText: PropType<string>
  height: PropType<number | string>
  width: PropType<number | string>
  circle: PropType<boolean>
  wrapStyle: PropType<any>
  contentStyle: PropType<any>
  barStyle: PropType<any>
  actionStyle: PropType<any>
}

// 默认值
const props = withDefaults(defineProps<Props>(), {
  value: false,
  isSlot: false,
  text: '请按住滑块拖动',
  successText: '验证通过',
  height: 40,
  width: 220,
  circle: false,
  wrapStyle: {},
  contentStyle: {},
  barStyle: {},
  actionStyle: {}
});

• Emits

emits: ['success', 'update:value', 'change', 'start', 'move', 'end']

金合研究院

金合开发者平台