An Image VerifyCode Component based on Vue.js and Element UI
# install dependencies
npm install vue-image-verifycode --savemain.js
import ImageVerifyCode from 'vue-image-verifycode'
Vue.use(ImageVerifyCode)App.vue
<vue-image-verifycode :url="url"></vue-image-verifycode>data() {
return {
url: 'https://xxxx' //Change to your image URL
}
}demo
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| url | 图形验证码接口地址，必填属性 | string | — | — |
| radius | 验证码容器的圆角大小，建议4px，和element ui的组件圆角大小保持一致 | string/number | — | 4px/4 |
| mask | 鼠标悬浮时是否显示遮罩层 | boolean | — | true |
| mask-color | 遮罩层背景颜色，支持RGB,RGBA,16进制颜色 | string | — | rgba(87, 87, 87, 0.5) |
| refresh | 点击是否刷新验证码 | boolean | — | true |
| icon-src | 遮罩层中的刷新图标，使用element ui icon的class名称 | string | — | el-icon-refresh-right |
| icon-color | 遮罩层中的刷新图标颜色，与mask-color使用方法一致 | string | — | rgba(255, 255, 255, 0.8) |
| icon-size | 遮罩层中的刷新图标大小，建议24px | string/number | — | 24px/24 |
If you want to know more, you can come to this website! vue-image-verifycode