首次提交

cdTMP/src/components/index.js

@@ -0,0 +1,3 @@
+// echarts的东西
+
+// ma组件相关东西

cdTMP/src/components/ma-verifyCode/index.vue

@@ -0,0 +1,104 @@
+<template>
+    <a-tooltip content="点击切换验证码">
+        <canvas ref="verfiyCanvas" class="canvas" :width="props.width" :height="props.height" @click="refresh" />
+    </a-tooltip>
+</template>
+
+<script setup>
+import { ref, onMounted } from "vue"
+import { Message } from "@arco-design/web-vue"
+
+
+const codeText = ref("")
+const verfiyCanvas = ref(null)
+const props = defineProps({
+    height: { type: Number, default: 36 },
+    width: { type: Number, default: 120 },
+    pool: { type: String, default: "abcdefghjkmnpqrstuvwxyz23456789" },
+    size: { type: Number, default: 4 },
+    showError: { type: Boolean, default: true }
+})
+
+const checkResult = (verifyCode) => {
+    if (!verifyCode || verifyCode.length === 0) {
+        props.showError && Message.error("请输入验证码")
+        return false
+    }
+
+    if (verifyCode.toLowerCase() !== codeText.value.toLowerCase()) {
+        props.showError && Message.error("验证码错误，请重新输入")
+        generateCode()
+        return false
+    } else {
+        return true
+    }
+}
+
+const randomNum = (min, max) => {
+    return parseInt(Math.random() * (max - min) + min)
+}
+
+const randomColor = (min, max) => {
+    const r = randomNum(min, max)
+    const g = randomNum(min, max)
+    const b = randomNum(min, max)
+    return `rgb(${r},${g},${b})`
+}
+
+const generateCode = () => {
+    codeText.value = ""
+    const ctx = verfiyCanvas.value.getContext("2d")
+    ctx.fillStyle = randomColor(230, 255)
+    ctx.fillRect(0, 0, props.width, props.height)
+
+    for (let i = 0; i < props.size; i++) {
+        let currentText = "" + props.pool[randomNum(0, props.pool.length)]
+        codeText.value += currentText
+        ctx.font = "36px Simhei"
+        ctx.textAlign = "center"
+        ctx.fillStyle = randomColor(80, 150)
+        ctx.fillText(currentText, (i + 1) * randomNum(20, 25), props.height / 2 + 13)
+    }
+
+    for (let i = 0; i < 5; i++) {
+        ctx.beginPath()
+        ctx.moveTo(randomNum(0, props.width), randomNum(0, props.height))
+        ctx.lineTo(randomNum(0, props.width), randomNum(0, props.height))
+        ctx.strokeStyle = randomColor(180, 230)
+        ctx.closePath()
+        ctx.stroke()
+    }
+
+    for (let i = 0; i < 40; i++) {
+        ctx.beginPath()
+        ctx.arc(randomNum(0, props.width), randomNum(0, props.height), 1, 0, 2 * Math.PI)
+        ctx.closePath()
+        ctx.fillStyle = randomColor(150, 200)
+        ctx.fill()
+    }
+
+    ctx.restore()
+    ctx.save()
+
+    return codeText
+}
+
+onMounted(() => {
+    generateCode()
+})
+
+const refresh = () => {
+    generateCode()
+}
+
+defineExpose({ checkResult, refresh })
+</script>
+
+<style lang="less" scoped>
+:deep(.arco-input-append) {
+    padding: 0 !important;
+}
+.canvas {
+    cursor: pointer;
+}
+</style>