0.1.3 • Published 4 years ago
@johnnyguan/vue-captcha-code v0.1.3
vue-captcha-code
Project setup
npm i @johnnyguan/vue-captcha-codeDescription
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()