1.0.8 • Published 6 months ago
一个基于vue3的滑块校验组件.
演示地址
https://xuhui1998.github.io/slider-verify-vue3/demo.html
- 安装插件
# npm 安装:
npm install slider-verify-vue3
# yarn 安装:
yarn add slider-verify-vue3
- 引入插件
import SliderVerify from 'slider-verify-vue3'
import 'slider-verify-vue3/lib/style.css';
createApp(App).use(SliderVerify)
- 使用插件
<template>
<div>
<SliderVerify v-model="isPass" />
</div>
</template>
<script>
import { ref } from 'vue'
const isPass = ref(false)
</script>
- 配置参数
参数 | 类型 | 默认值 | 描述 |
---|
v-model | Boolean | false | 校验是否通过 |
size | String | medium | 尺寸 |
width | Number String | 100% | 宽度 |
icons | Array | IconDoubleRight, IconCheck | 滑块图标,支持图片和SVG图标 |
sliderTip | String | 请按住滑块拖动 | 滑块文案 |
successTip | String | 验证通过 | 验证成功文案 |
sliderColor | String | #f2f2f2 | 滑块的背景色 |
fillColor | String | #79ce8e | 拖动后的背景填充色 |
事件 | 描述 |
---|
onSuccess | 校验通过 |
onFail | 校验失败 |
onDrag | 拖动滑块 |
onDragEnd | 停止拖动 |