1. プラグインをインストールする
npm install vue-puzzle-vcode --save
レンダリング:
プラグインドキュメントパラメータ:
2. コンポーネントコード
<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>
親コンポーネントのコード
次に、親コンポーネントがコンポーネントを導入し、isShow を通じて子コンポーネントを表示するかどうかを制御します。
<SlideVerify @successFun="confirm" :isShow="isShow" @close="close" />
import SlideVerify from '../../components/SlideVerify.vue'
export default {
components: {
SlideVerify
},
data () {
return {
isShow: false, //是否弹框显示图形验证码
}
},
},