1.0.5 支持TS

Author: javaLuo

.babelrc

@@ -1,4 +1,7 @@
 {
   "presets": ["@babel/preset-env", "@babel/preset-react"],
-  "plugins": ["@babel/plugin-transform-runtime", ["@babel/plugin-proposal-decorators", { "legacy": true }]]
+  "plugins": [
+    "@babel/plugin-transform-runtime",
+    ["@babel/plugin-proposal-decorators", { "legacy": true }]
+  ]
 }

.eslintrc.json

@@ -0,0 +1,30 @@
+{
+  "root": true,
+  "parser": "@typescript-eslint/parser",
+  "extends": [
+    "plugin:react-hooks/recommended",
+    "plugin:@typescript-eslint/eslint-recommended",
+    "plugin:@typescript-eslint/recommended",
+    "prettier/@typescript-eslint"
+  ],
+  "plugins": ["react", "react-hooks", "prettier"],
+  "rules": {
+    "semi": "warn",
+    "no-unused-vars": "off",
+    "no-cond-assign": "error",
+    "no-debugger": "warn",
+    "no-dupe-args": "error",
+    "no-caller": "error",
+    "no-unmodified-loop-condition": "error",
+    "no-with": "error",
+    "no-catch-shadow": "error",
+
+    "@typescript-eslint/camelcase": "off",
+    "@typescript-eslint/no-unused-vars": "off",
+    "@typescript-eslint/no-var-requires": "off",
+    "@typescript-eslint/no-use-before-define": "off",
+    "@typescript-eslint/explicit-function-return-type": "off",
+
+    "prettier/prettier": "warn"
+  }
+}

example/src/index.js

@@ -1,16 +1,16 @@
-import React from 'react';
-import Vcode from '../../dist/index.js';
-import ReactDom from 'react-dom';
-import ImgTest1 from '../assets/test1.png';
-import ImgTest2 from '../assets/test2.png';
+import React from "react";
+import Vcode from "../../dist/index.js";
+import ReactDom from "react-dom";
+import ImgTest1 from "../assets/test1.png";
+import ImgTest2 from "../assets/test2.png";
 class Test extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
       img: 1,
-      input2: '', // 第2个input的值
-      vcode2: '-1', // 第2个vcode的值
-      code: '',
+      input2: "", // 第2个input的值
+      vcode2: "-1", // 第2个vcode的值
+      code: "",
       width: 200,
     };
   }
@@ -22,7 +22,7 @@ class Test extends React.Component {
   }
 
   onVcode2Change(v) {
-    console.log('触发回调onChange', v);
+    console.log("触发回调onChange", v);
     if (v) {
       this.setState({
         vcode2: v,
@@ -35,18 +35,18 @@ class Test extends React.Component {
     this.setState({
       img: imgindex,
       code: imgindex === 1 ? ImgTest1 : ImgTest2,
-      vcode2: '1234',
+      vcode2: imgindex === 1 ? "wow1" : "helloworld",
     });
   }
   onChangeStr() {
-    const a = ['a', 'b', 'c', 'd'];
+    const a = ["a", "b", "c", "d"];
     const d = [];
     for (let i = 0; i < 5; i++) {
       d.push(a[Math.round(Math.random() * 3)]);
     }
-    console.log('code:', d);
+    console.log("code:", d);
     this.setState({
-      code: d.join(''),
+      code: d.join(""),
     });
   }
 
@@ -55,7 +55,7 @@ class Test extends React.Component {
   }
   onChangeWidth() {
     const l = Math.round(Math.random() * 800 + 400);
-    console.log('改变width:', l);
+    console.log("改变width:", l);
     this.setState({
       width: l,
     });
@@ -64,9 +64,21 @@ class Test extends React.Component {
     return (
       <div>
         <div>
-          <input type="text" placeholder="请输入正确的验证码" value={this.state.input2} onChange={e => this.onInput2Change(e)} maxLength={20} />
-          <Vcode onChange={v => this.onVcode2Change(v)} value={this.state.code} width={this.state.width} />
-          <span>{this.state.input2 === this.state.vcode2 ? '输入正确' : '输入错误'}</span>
+          <input
+            type="text"
+            placeholder="请输入正确的验证码"
+            value={this.state.input2}
+            onChange={(e) => this.onInput2Change(e)}
+            maxLength={20}
+          />
+          <Vcode
+            onChange={(v) => this.onVcode2Change(v)}
+            value={this.state.code}
+            width={this.state.width}
+          />
+          <span>
+            {this.state.input2 === this.state.vcode2 ? "输入正确" : "输入错误"}
+          </span>
         </div>
         <hr />
         <button onClick={() => this.onChangeImg()}>更换图片</button>
@@ -77,4 +89,4 @@ class Test extends React.Component {
   }
 }
 
-ReactDom.render(<Test />, document.getElementById('root'));
+ReactDom.render(<Test />, document.getElementById("root"));