// 导入
import captcha from 'gzm-captcha'
// 配置
const conf = {
width: 300,
height: 100,
len: 4,
type: '',
lineShow: false,
pointShow: false
}
// 获得图片验证码base64数据
const imagedata = captcha(conf).value()
<template>
<div>
<p>测试验证码</p>
<img :src="codeImage" alt="" @click="refresh">
<p>验证验证码</p>
<input name="code" v-model="code" />
<button @click="validate">提交</button>
</div>
</template>
<script>
import captcha from 'gzm-captcha'
export default {
name: 'Captcha',
mounted () {
this.init()
},
data () {
return {
code: '',
codeImage: ''
}
},
methods: {
init () {
const conf = { width: 300, height: 100, lineShow: false, pointShow: false }
if (this.type !== undefined) {
conf['type'] = this.type
}
this.instance = captcha(conf)
this.codeImage = this.instance.value()
},
refresh () {
this.codeImage = this.instance.refresh()
},
validate () {
if (this.instance.validate(this.code)) {
alert('验证码正确')
} else {
alert('验证码错误')
}
this.refresh()
}
}
}
</script>