1. Instale o plug-in
npm install vue-puzzle-vcode --save
Renderizações:
Parâmetros de documentação do plug-in:
2. Código do componente
<template>
<Vcode
:show="isShow"
:canvasWidth="320"
:canvasHeight="200"
:puzzleScale="1"
:sliderSize="40"
:range="10"
:imgs="picArray"
successText="验证成功！"
failText="验证失败，请重试！"
sliderText="拖动滑块验证"
@success="onSuccess"
@close="close"
/>
</template>
<script>
import Vcode from 'vue-puzzle-vcode'
export default {
name: 'SliderVerify',
props: ['successFun', 'isShow'], //父组件控制isShow的true/false
components: {
Vcode
},
data () {
return {
//在data中引入`assets`中的图片可以通过`require`的方式来引入
picArray: [
require('../img/zhuce_logo.png'),
require('../img/noData.png'),
require('../img/checkPoster.png')
]
}
},
methods: {
onSuccess () {
//调用父组件传递过来的验证通过的回调函数
this.$emit('successFun')
},
close () {
this.$emit('close') //关闭执行父组件的方法 将isShow设置为false
}
},
}
</script>
código do componente pai
Em seguida, o componente pai apresenta o componente e controla se o componente filho é exibido por meio de isShow
<SlideVerify @successFun="confirm" :isShow="isShow" @close="close" />
import SlideVerify from '../../components/SlideVerify.vue'
export default {
components: {
SlideVerify
},
data () {
return {
isShow: false, //是否弹框显示图形验证码
}
},
},