この記事では、グラフィック認証コードログインを実装するためのVueの具体的なコードを参考までに紹介します。具体的な内容は次のとおりです。 1. レンダリング 2. components の下に、次の内容の新しいファイル identify.vue を作成します。 <テンプレート> <div class="s-canvas"> <canvas id="s-canvas" :width="contentWidth" :height="contentHeight"></canvas> </div> </テンプレート> <スクリプト> エクスポートデフォルト{ 名前: 'SIdentify', 小道具: { 識別コード: タイプ: 文字列、 デフォルト: '1234' }, フォントサイズ最小: { タイプ: 数値、 デフォルト: 28 }, フォントサイズ最大: { タイプ: 数値、 デフォルト: 40 }, 背景色最小: { タイプ: 数値、 デフォルト: 180 }, 背景色最大: { タイプ: 数値、 デフォルト: 240 }, 色最小: タイプ: 数値、 デフォルト: 50 }, 色最大値: { タイプ: 数値、 デフォルト: 160 }, ラインカラー最小: { タイプ: 数値、 デフォルト: 40 }, ラインカラー最大: { タイプ: 数値、 デフォルト: 180 }, ドットカラー最小: { タイプ: 数値、 デフォルト: 0 }, ドットカラーマックス: { タイプ: 数値、 デフォルト: 255 }, コンテンツ幅: { タイプ: 数値、 デフォルト: 112 }, コンテンツの高さ: { タイプ: 数値、 デフォルト: 40 } }, メソッド: { // 乱数を生成する randomNum (min, max) { Math.floor(Math.random() * (max - min) + min) を返します。 }, // ランダムな色を生成する randomColor (min, max) { var r = this.randomNum(最小値, 最大値) var g = this.randomNum(最小値, 最大値) var b = this.randomNum(最小値, 最大値) 'rgb(' + r + ',' + g + ',' + b + ')' を返します }, 描画画像() { var キャンバス = document.getElementById('s-canvas') var ctx = キャンバス.getContext('2d') ctx.textBaseline = '下' // 背景を描画する ctx.fillStyle = this.randomColor( this.backgroundColorMin、 this.backgroundColorMax ) ctx.fillRect(0, 0, this.contentWidth, this.contentHeight) // テキストを描画する for (let i = 0; i < this.identifyCode.length; i++) { this.drawText(ctx, this.identifyCode[i], i) } this.drawLine(ctx) this.drawDot(ctx) }, 描画テキスト (ctx, txt, i) { ctx.fillStyle = this.randomColor(this.colorMin, this.colorMax) ctx.フォント = this.randomNum(this.fontSizeMin, this.fontSizeMax) + 'px SimHei' var x = (i + 1) * (this.contentWidth / (this.identifyCode.length + 1)) var y = this.randomNum(this.fontSizeMax, this.contentHeight - 5) var deg = this.randomNum(-30, 30) // 座標原点と回転角度を変更する ctx.translate(x, y) ctx.rotate(度 * Math.PI / 270) です。 ctx.fillText(txt, 0, 0) // 座標原点と回転角度を復元します ctx.rotate(-deg * Math.PI / 270) ctx.translate(-x, -y) }, 描画線 (ctx) { // 干渉線を描く for (let i = 0; i < 2; i++) { ctx.strokeStyle = this.randomColor( this.lineColorMin、 this.lineColorMax ) ctx.beginPath() ctx.moveTo() 関数は、 this.randomNum(0, this.contentWidth)、 this.randomNum(0, this.contentHeight) ) ctx.lineTo() 関数は、 this.randomNum(0, this.contentWidth)、 this.randomNum(0, this.contentHeight) ) ctx.ストローク() } }, 描画ドット (ctx) { // 干渉点を描画する for (let i = 0; i < 20; i++) { ctx.fillStyle = this.randomColor(0, 255) ctx.beginPath() ctx.arc( this.randomNum(0, this.contentWidth)、 this.randomNum(0, this.contentHeight)、 1、 0, 2 * 数学.PI ) ctx.fill() } } }, 時計: 識別コード(){ この.drawPic() } }, マウントされた(){ この.drawPic() } } </スクリプト> <style lang='scss' スコープ> .s-キャンバス{ 高さ: 38px; } .s-canvas キャンバス{ 上マージン: 1px; 左マージン: 8px; } </スタイル> 3. ページの紹介 <スクリプト> '../../components/identify' から SIdentify をインポートします。 エクスポートデフォルト{ コンポーネント: { SIdentify } } データ() { // 検証コードカスタム検証ルール const validVerifycode = (rule, value, callback) => { 定数 newVal = value.toLowerCase() const identifyStr = this.identifyCode.toLowerCase() (newVal === '')の場合{ callback(new Error('認証コードを入力してください')) } そうでない場合 (newVal !== identifyStr) { console.log('validateVerifycode:', 値) callback(new Error('認証コードが正しくありません!')) } それ以外 { 折り返し電話() } } 戻る { 識別コード: '3456789ABCDEFGHGKMNPQRSTUVWXY'、 識別コード: ''、 ルールフォーム: { ユーザー名: ''、 パスワード: ''、 検証コード: '' }, ルール: 確認コード: { 必須: true、トリガー: 'blur'、バリデータ: validVerifycode } ] } } } </スクリプト> 4.html <el-form-item prop="検証コード"> <div style="display:flex"> <el-入力 v-model="ruleForm.verifycode" placeholder="確認コードを入力してください" @keyup.enter.native="ログイン('ruleForm')" </el-input> ... <span @click="リフレッシュコード" ><s-identify :identifyCode="identifyCode"></s-identify </span> </div> </el-form-item> 5. マウント マウント() { //検証コードの初期化 this.identifyCode = '' this.makeCode(this.identifyCodes, 4) } 6. 方法 メソッド: { // 乱数を生成する randomNum(min, max) { Math.floor(Math.random() * (max - min) + min) を返します。 }, // 検証コードを切り替える refreshCode() { this.identifyCode = '' this.makeCode(this.identifyCodes, 4) }, // 4桁のランダムな検証コードを生成する makeCode(o, l) { (i = 0; i < l; i++ とします) { this.identifyCode += this.identifyCodes[ this.randomNum(0, this.identifyCodes.length) ] } } } 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: 画像の盗難を防ぐために Nginx で Referer を設定する方法
>>: nginx+WordPressで個人ブログを構築するプロセス全体の詳細な説明
目次1. CentOS7+MySQL8.0、yumソースインストール2. MySQLにログインしてパ...
最近、MySQL を始めとしてデータベースの知識を勉強し始めました。以下では、皆さんの参考になるよう...
背景: parseInt(0.006) または parseInt(0.0006) は 0 という値を...
1. div css マウスの手の形は cursor:pointer; です。 2. HTML の相...
序文この記事は主に CentOS7 で PHP スケジュールタスクを実行することに関する関連コンテン...
まず、次の質問について考えてみましょう。このような膨大な量のデータをデータベースに挿入するには、通常...
目次例示する1. Dockerリモートアクセスを有効にする2. Dockerに接続する3. イメージ...
目次序文問題の説明原因分析拡大する総括する序文最近、データの欠落やデータの損失に関するフィードバック...
第二に、キーワードのランキングは、Webページの表示速度にも関係しています(参照:キーワードランキン...
インターネットにはすでにこの種の記事が溢れていますが、私がこれをまだ書いている理由は単純です。それは...
fdisk と比較すると、parted はあまり使用されず、主に 2T を超えるパーティションに使用...
例えば:コードをコピーコードは次のとおりです。 <input type="check...
序文ダーク モードの概念は、 MacOS系統のMojaveに由来し、ユーザーが選択できる 2 つのス...
目次1. 透かしのJsファイルを作成する2. 導入操作2.1 App.vueや他のページでの参照2....
1. ワイヤレスPowerShell を実行し、次のコマンドを入力します。 install-wind...