luguanrui / Vue Img Verify
vue图形验证码组件
Stars: ✭ 44
Projects that are alternatives of or similar to Vue Img Verify
Vue Coin Hive
Start mining coins in your Vue projects in 1 second.
Stars: ✭ 14 (-68.18%)
Mutual labels: vue2
Bootstrap Vue Treeview
A treeview component for Bootstrap and Vue.js 2.0+
Stars: ✭ 34 (-22.73%)
Mutual labels: vue2
Unitauto
☀️机器学习单元测试平台,零代码、全方位、自动化 测试 方法/函数 的性能、正确性和可用性。☀️An unit testing management platform powered by machine learning. Coding-free, comprehensive and automatical testing for methods/functions.
Stars: ✭ 32 (-27.27%)
Mutual labels: vue2
Vue Tree
tree and multi-select component based on Vue.js 2.0
Stars: ✭ 880 (+1900%)
Mutual labels: vue2
Slim Ui
Simple components library used for building lightweight vuejs projects
Stars: ✭ 38 (-13.64%)
Mutual labels: vue2
Nly Adminlte Vue
vuejs2 AdminLte3 template more than 50 components and 10 directives.such as collapse ,sidebar,container,infobox,breadcrumb,card,grid,dropdown,toast,navbar,timeline,icon,progress
Stars: ✭ 44 (+0%)
Mutual labels: vue2
Vue Express Webpack Gulp
使用Vue,Express,Webpack,gulp搭建的自动化电影库项目
Stars: ✭ 42 (-4.55%)
Mutual labels: vue2
Quasar Awesome
🎉 A list of awesome things related to Quasar
Stars: ✭ 995 (+2161.36%)
Mutual labels: vue2
前端图形验证码组件
效果图
说明
-
使用canvas实现
-
4位,数字加大写字母的验证码
-
点击可以实现图片的变化
使用
1.克隆项目,主要代码在src/components/vue-img-verify.vue
中
git clone https://github.com/luguanrui/vue-img-verify.git
2.演示代码
DOM:
<vue-img-verify @getImgCode="getImgCode" ref="vueImgVerify" />
JS:
<script>
import vueImgVerify from './components/vue-img-verify'
export default {
name: 'App',
data() {
return {
imgCode: ''
}
},
methods: {
// 点击图片获取验证码
getImgCode(code) {
this.imgCode = code
console.log('验证码: ' + this.imgCode)
},
// 点击按钮获取验证码
handleClick() {
this.imgCode = this.$refs.vueImgVerify.draw()
console.log('验证码: ' + this.imgCode)
}
},
components: {
vueImgVerify
}
}
</script>
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].