An Image VerifyCode Component based on Vue.js and Element UI
# install dependencies
npm install vue-image-verifycode --save
main.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