一个基于vue2.js和canvas的滑块拼图校验插件, 支持PC、移动端.
Demo演示
在vue3.js中使用?: https://github.com/author-fuyf/slider-verify-v3
使用
vue-cli
vue-cli 中使用
- 首先安装插件
# npm 安装：
npm install slider-verify-v2 -S-
main.js中引入
import SliderVerify from 'slider-verify-v2'
import 'slider-verify-v2/lib/SliderVerify.css'
Vue.use(SliderVerify)- 组件中声明
<template>
<div>
<SliderVerify
:isShowSelf.sync="sliderVConf.isShowSelf"
:imgUrl="sliderVConf.imgUrl"
:sText="sliderVConf.sText"
:eText="sliderVConf.eText"
:isBorder="sliderVConf.isBorder"
:isParentNode="sliderVConf.isParentNode"
:isCloseBtn="sliderVConf.isCloseBtn"
:isReloadBtn="sliderVConf.isReloadBtn"
:isShowTip="sliderVConf.isShowTip"
:width="sliderVConf.width"
:height="sliderVConf.height"
@reload="emitChange('reload')"
@show="emitChange('show')"
@hide="emitChange('hide')"
@close="emitChange('close')"
@success="emitChange('success')"
@fail="emitChange('fail')"
></SliderVerify>
</div>
</template>script标签
实际使用建议下载到本地或服务器
-
引入样式： https://portal.fuyunfeng.top/api/files/download_file?file_name=SliderVerify-v2.css
-
引入JS： https://portal.fuyunfeng.top/api/files/download_file?file_name=SliderVerify.umd-v2.js
<meta charset="utf-8">
<title>SliderVerify demo</title>
<link rel="stylesheet" href="https://portal.fuyunfeng.top/api/files/download_file?file_name=SliderVerify-v2.css">
<body>
<div id="app">
<slider-verify
:is-show-self.sync="isShowSelf"
:width="width"
:height="height"
:img-url="imgUrl"
:s-text="sText"
:e-text="eText"
:is-border="isBorder"
:is-close-btn="isCloseBtn"
:is-reload-btn="isReloadBtn"
:is-parent-node="isParentNode"
:is-show-tip="isShowTip"
@reload="emitChange('reload')"
@show="emitChange('show')"
@hide="emitChange('hide')"
@close="emitChange('close')"
@success="emitChange('success')"
@fail="emitChange('fail')"></slider-verify>
</div>
</body>
<script src="https://unpkg.com/vue@2.7.14/dist/vue.js"></script>
<script src="https://portal.fuyunfeng.top/api/files/download_file?file_name=SliderVerify.umd-v2.js"></script>
<script>
new Vue({
data() {
return {
isShowSelf: true,
width: 300,
height: 180,
imgUrl: '',
sText: 'sText',
eText: 'eText',
isBorder: true,
isCloseBtn: true,
isReloadBtn: true,
isParentNode: false,
isShowTip: true
}
},
methods: {
emitChange(type) {
console.log(type)
}
}
}).$mount('#app')
</script>更详细的
参数
-
isShowSelf: 显隐控制，组件自身提供关闭功能按钮，建议与.sync修饰符绑定，否则需要在
close回调事件中自行处理, 默认false. -
width: 图片宽度 默认
300. -
height: 图片高度 默认
180. -
imgUrl: 自定义图片地址, 如https://...的绝对路径, 需要设置资源允许跨域,
默认图片随机切换. -
sText: 校验成功的提示, 默认
验证通过. -
eText: 校验失败的提示, 默认
请正确拼合图像. -
isShowTip: 校验结果轻提示, 默认
true. -
isBorder: 自带的外层边框, 默认
true. -
isCloseBtn: 底部操作栏 - 关闭按钮, 默认
true. -
isReloadBtn: 底部操作栏 - 刷新按钮, 默认
true. -
isParentNode: 是否以父级宽度控制, 在类似其他外部弹窗中调用时很有用, 无需指定宽度, 以父级宽度为准, 默认
false
事件
- show: 展现时触发.
- hide: 隐藏时触发.
- close: 主动关闭时触发.
- success: 校验成功时触发.
- fail: 校验失败时触发.
- reload: 刷新时触发.