Vue implementiert die Anmeldung mit grafischem Bestätigungscode

<Vorlage>
  <div Klasse="s-canvas">
    <canvas id="s-canvas" :width="Inhaltsbreite" :height="Inhaltshöhe"></canvas>
  </div>
</Vorlage>
<Skript>
Standard exportieren {
  Name: 'SIdentify',
  Requisiten: {
    Identifizierungscode:
      Typ: Zeichenfolge,
      Standard: „1234“
    },
    SchriftgrößeMin: {
      Typ: Nummer,
      Standard: 28
    },
    SchriftgrößeMax: {
      Typ: Nummer,
      Standard: 40
    },
    HintergrundFarbeMin: {
      Typ: Nummer,
      Standard: 180
    },
    HintergrundFarbeMax: {
      Typ: Nummer,
      Standard: 240
    },
    FarbeMin:
      Typ: Nummer,
      Standard: 50
    },
    FarbeMax: {
      Typ: Nummer,
      Standard: 160
    },
    LinienfarbeMin: {
      Typ: Nummer,
      Standard: 40
    },
    ZeilenfarbeMax: {
      Typ: Nummer,
      Standard: 180
    },
    PunktFarbeMin: {
      Typ: Nummer,
      Standard: 0
    },
    PunktFarbeMax: {
      Typ: Nummer,
      Standard: 255
    },
    Inhaltsbreite: {
      Typ: Nummer,
      Standard: 112
    },
    Inhaltshöhe: {
      Typ: Nummer,
      Standard: 40
    }
  },
  Methoden: {
    // Erzeuge eine Zufallszahl randomNum (min, max) {
      gibt Math.floor(Math.random() * (max - min) + min) zurück
    },
    // Erzeuge eine zufällige Farbe randomColor (min, max) {
      var r = diese.randomNum(min, max)
      var g = diese.randomNum(min, max)
      var b = diese.randomNum(min, max)
      gibt 'rgb(' + r + ',' + g + ',' + b + ')' zurück
    },
    zeichneBild() {
      var Leinwand = document.getElementById('s-canvas')
      var ctx = canvas.getContext('2d')
      ctx.textBaseline = "unten"
      // Zeichne den Hintergrund ctx.fillStyle = this.randomColor(
        dies.backgroundColorMin,
        dies.backgroundColorMax
      )
      ctx.fillRect(0, 0, diese.Inhaltsbreite, diese.Inhaltshöhe)
      // Text zeichnen für (let i = 0; i < this.identifyCode.length; i++) {
        dies.drawText(ctx, dies.identifyCode[i], i)
      }
      dies.drawLine(ctx)
      dies.drawDot(ctx)
    },
    zeichneText (ctx, txt, i) {
      ctx.fillStyle = diese.randomColor(diese.colorMin, diese.colorMax)
      ctx.Schriftart =
        diese.randomNum(diese.fontSizeMin, diese.fontSizeMax) + 'px SimHei'
      var x = (i + 1) * (diese.Inhaltsbreite / (diese.IdentifyCode.Länge + 1))
      var y = diese.randomNum(diese.fontSizeMax, diese.contentHeight - 5)
      var deg = diese.randomNum(-30, 30)
      // Koordinatenursprung und Drehwinkel ändern ctx.translate(x, y)
      ctx.rotate(Grad * Math.PI / 270)
      ctx.fillText(txt, 0, 0)
      // Koordinatenursprung und Drehwinkel wiederherstellen ctx.rotate(-deg * Math.PI / 270)
      ctx.translate(-x, -y)
    },
    zeichneLinie (ctx) {
      // Interferenzlinien zeichnen für (let i = 0; i < 2; i++) {
        ctx.strokeStyle = diese.randomColor(
          diese.lineColorMin,
          diese.lineColorMax
        )
        ctx.beginPath()
        ctx.moveTo(
          diese.randomNum(0, diese.contentWidth),
          diese.randomNum(0, diese.contentHeight)
        )
        ctx.lineTo(
          diese.randomNum(0, diese.contentWidth),
          diese.randomNum(0, diese.contentHeight)
        )
        ctx.stroke()
      }
    },
    Punkt zeichnen (ctx) {
      // Interferenzpunkte zeichnen für (let i = 0; i < 20; i++) {
        ctx.fillStyle = diese.randomColor(0, 255)
        ctx.beginPath()
        ctx.arc(
          diese.randomNum(0, diese.contentWidth),
          diese.randomNum(0, diese.contentHeight),
          1,
          0,
          2 * Math.PI
        )
        ctx.fill()
      }
    }
  },
  betrachten:
    identifizierungscode () {
      dieses.drawPic()
    }
  },
  montiert () {
    dieses.drawPic()
  }
}
</Skript>
<style lang='scss' scoped>
.s-Leinwand {
    Höhe: 38px;
}
.s-canvas Leinwand{
    Rand oben: 1px;
    Rand links: 8px;
}
</Stil>

<Skript>
 importiere SIdentify aus '../../components/identify'
 Standard exportieren {
    Komponenten: { SIdentify }
  }
  Daten() {
    // Verifizierungscode, benutzerdefinierte Verifizierungsregeln, const validateVerifycode = (rule, value, callback) => {
      const newVal = Wert.toLowerCase()
      const identifyStr = this.identifyCode.toLowerCase()
      wenn (neuerWert === '') {
        callback(new Error('Bitte geben Sie den Bestätigungscode ein'))
      } sonst wenn (newVal !== identifyStr) {
        console.log('validateVerifycode:', Wert)
        callback(new Error('Der Bestätigungscode ist falsch!'))
      } anders {
        Rückruf()
      }
    }
    zurückkehren {
      Identifizierungscodes: '3456789ABCDEFGHGKMNPQRSTUVWXY',
      Identifizierungscode: '',
       RegelForm: {
        Benutzername: '',
        Passwort: '',
        Prüfcode: ''
      },
      Regeln:
        Prüfcode:
          { erforderlich: true, Auslöser: „blur“, Validator: validateVerifycode }
        ]
      }
 }
    }
</Skript>

<el-form-item prop="Verifizierungscode">
 <div Stil="Anzeige:flex">
 <el-Eingabe
 v-Modell="Regelformular.Verifycode"
 Platzhalter="Bitte geben Sie den Bestätigungscode ein"
 @keyup.enter.native="login('ruleForm')"
 ></el-Eingabe>
 <span @click="Code aktualisieren"
 ><s-identify :identifyCode="identifyCode"></s-identify
 ></span>
 </div>
</el-form-item>

montiert() {
    //Initialisierung des Bestätigungscodes this.identifyCode = ''
    dies.makeCode(diese.identifyCodes, 4)
  }

Methoden: {
    // Zufallszahl generieren randomNum(min, max) {
      gibt Math.floor(Math.random() * (max - min) + min) zurück
    },
    // Bestätigungscode wechseln refreshCode() {
      this.identifyCode = ''
      dies.makeCode(diese.identifyCodes, 4)
    },
    // Einen vierstelligen zufälligen Verifizierungscode generieren makeCode(o, l) {
      für (sei i = 0; i < l; i++) {
        dieser.identifizierenCode += dieser.identifizierenCodes[
          diese.randomNum(0, diese.identifyCodes.length)
        ]
      }
    }
 }