@johnnyguan/vue-captcha-code
Version:
46 lines (39 loc) • 1.14 kB
Markdown
# 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()
```