0.1.1 • Published 5 years ago
rl-canvas-code v0.1.1
rl-canvas-code
Project setup
npm install rl-canvas-code
use
<template>
<div class="box">
<input type="text" v-model="myCode" />
<canvas-code
class="canvas"
:codeLength="codeLength"
:fontStyle="fontStyle"
:fontX="fontX"
:fontY="fontY"
:ingoreCase="ingoreCase"
@codeChange="codeChange"
></canvas-code>
<br />
<button @click="submitData">提交</button>
</div>
</template>
<script>
import CanvasCode from "rl-canvas-code";
export default {
components: { CanvasCode },
data() {
//这里存放数据
return {
fontStyle: "bold 20px 微软雅黑", // 字体样式 默认"bold 20px 微软雅黑"
codeLength: 4, // 验证码几位 默认4
fontX: 10, // 字间距 默认10
fontY: 20, // 字上边距 默认 20
ingoreCase: true, // 是否忽略大小写 默认 true
code: "",
myCode: ""
};
},
//方法集合
methods: {
submitData() {
console.log("this.myCode :>> ", this.myCode);
console.log("this.code :>> ", this.code);
},
codeChange(code) {
console.log("code :>> ", code);
this.code = code;
}
}
};
</script>
<style lang="less" scoped>
.box {
width: 300px;
height: 600px;
background-color: #aabbcc;
margin: 0 auto;
padding: 30px 0;
input {
height: 50px;
line-height: 50px;
outline: none;
border: none;
}
.canvas {
height: 50px;
width: 120px;
border: 1px solid red;
line-height: 50px;
background-color: #eeeeee;
}
}
</style>
配置说明
- fontStyle: "bold 20px 微软雅黑", // 字体样式 默认"bold 20px 微软雅黑"
- codeLength: 4, // 验证码几位 默认4
- fontX: 10, // 字间距 默认10
- fontY: 20, // 字上边距 默认 20
- ingoreCase: true, // 是否忽略大小写 默认 true
- event codeChange 绘制好的回调,把绘制的字符串传递回来