johnnyguan/vue-captcha-code

vue-captcha-code

Project setup

npm i @johnnyguan/vue-captcha-code

Description

This project is aimed to show captcha code (length: 4) by canvas. The captcha code can either be passed as a variable or be generated by default.

Usage

main.js

import Vue from 'vue'
import App from './App.vue'
import VueCaptchaCode from '@johnnyguan/vue-captcha-code'
Vue.use(VueCaptchaCode)
Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

XXX.vue

<captcha-code ref="code"></captcha-code>

Configuration

属性名	描述	值类型	默认值
height	canvas高度	Number	80
width	canvas宽度	Number	40
captcha	captcha code	String(4)	不传则内部生成
enableClick	是否点击canvas更新captcha	Boolean	false
fontSize	字体大小	String	'20'
fontWeight	字体粗细	String	'normal' 可选'bold','bolder', '100'等
fontFace	字体类型	String	'serif'
fontStyle	字体样式	String	'normal' 可选'italic','oblique'
textFillColor	字体颜色	String	'#ff0000'

Method

this.$refs.code.getCode()