Slider-verify-v3 NPM

一个基于vue3.js和canvas的滑块拼图校验插件, 支持PC、移动端.

Demo演示

Demo：https://portal.fuyunfeng.top/plugins_v3/index.html
在vue2.js中使用?: https://github.com/author-fuyf/slider-verify-v2

使用

vue-cli

vue-cli 中使用

首先安装插件

# npm 安装：
npm install slider-verify-v3 -S

main.js 中引入

import SliderVerify from 'slider-verify-v3'
import 'slider-verify-v3/lib/SliderVerify.css'
createApp(App).use(SliderVerify)

组件中声明

<template>
  <div>
    <SliderVerify
      v-model:isShowSelf="sliderVConf.isShowSelf"
      :imgUrl="sliderVConf.imgUrl"
      :sText="sliderVConf.sText"
      :eText="sliderVConf.eText"
      :isBorder="sliderVConf.isBorder"
      :isParentNode="sliderVConf.isParentNode"
      :isCloseBtn="sliderVConf.isCloseBtn"
      :isReloadBtn="sliderVConf.isReloadBtn"
      :is-show-tip="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-v3.css
引入JS： https://portal.fuyunfeng.top/api/files/download_file?file_name=SliderVerify.umd-v3.js

<meta charset="utf-8">
<title>SliderVerify demo</title>
<link rel="stylesheet" href="https://portal.fuyunfeng.top/api/files/download_file?file_name=SliderVerify-v3.css">
<body>
  <div id="app">
    <slider-verify 
      v-model:is-show-self="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@3.3.2/dist/vue.global.js"></script>
<script src="https://portal.fuyunfeng.top/api/files/download_file?file_name=SliderVerify.umd-v3.js"></script>

<script>
  const app = Vue.createApp({
    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)
      }
    }
  })
  app.use(SliderVerify).mount('#app')
</script>

更详细的

参数

isShowSelf: 显隐控制，组件自身提供关闭功能按钮，建议v-model:is-show-self绑定，否则需要在close回调事件中自行处理, 默认 false.
width: 图片宽度默认 300.
height: 图片高度默认 180.
imgUrl: 自定义图片地址, 如https://...的绝对路径, 需要设置资源允许跨域, 默认图片随机切换.
sText: 校验成功的提示, 默认 验证通过.
eText: 校验失败的提示, 默认 请正确拼合图像.
isShowTip: 校验结果轻提示, 默认 true
isBorder: 自带的外层边框, 默认 true.
isCloseBtn: 底部操作栏 - 关闭按钮, 默认 true.
isReloadBtn: 底部操作栏 - 刷新按钮, 默认 true.
isParentNode: 是否以父级宽度控制, 在类似其他外部弹窗中调用时很有用, 无需指定宽度, 以父级宽度为准, 默认 false