Vueナンバープレート入力コンポーネントの使い方の詳しい説明

参考までに、シンプルなナンバープレート入力コンポーネント（vue）です。具体的な内容は次のとおりです。

効果画像:

vueコード:

<テンプレート>
    <div class="enTer">
      <div class="plateInput" id="plateInput">
        <div class="item" :class="{active: plateInput.input.type === 'p1'}" @click.stop="clickInput('p1')"><span id="p1">{{plateInput.input.value.p1}}</span></div>
        <div class="item" :class="{active: plateInput.input.type === 'p2'}" @click.stop="clickInput('p2')"><span id="p2">{{plateInput.input.value.p2}}</span></div>
        <div class="item" :class="{active: plateInput.input.type === 'p3'}" @click.stop="clickInput('p3')"><span id="p3">{{plateInput.input.value.p3}}</span></div>
        <div class="item" :class="{active: plateInput.input.type === 'p4'}" @click.stop="clickInput('p4')"><span id="p4">{{plateInput.input.value.p4}}</span></div>
        <div class="item" :class="{active: plateInput.input.type === 'p5'}" @click.stop="clickInput('p5')"><span id="p5">{{plateInput.input.value.p5}}</span></div>
        <div class="item" :class="{active: plateInput.input.type === 'p6'}" @click.stop="clickInput('p6')"><span id="p6">{{plateInput.input.value.p6}}</span></div>
        <div class="item" :class="{active: plateInput.input.type === 'p7'}" @click.stop="clickInput('p7')"><span id="p7">{{plateInput.input.value.p7}}</span></div>
        <div class="item" :class="{active: plateInput.input.type === 'p8',new: !plateInput.input.value.p8}" @click.stop="clickInput('p8')"><span id="p8">{{plateInput.input.value.p8}}</span></div>
      </div>
      <div class="bords" v-if="plateInput.input.dialogVisible">
        <div class="bor">
          <div class="btns">
            <button type="primary" size="small" plain @click="hiddenKeybord">キャンセル</button>
            <button type="primary" size="small" plain @click="enterWord">確認</button>
          </div>
          <ul class="キーボードの州" id="州" v-if="plateInput.input.dialogVisible && plateInput.input.type === 'p1'">
            <li v-for="i in Keyboard.province" @click.stop="clickKeyboard(i)">{{i}}</li>
            <li class="delete" @click.stop="clickDelete"><i class="icon">&#xe602;</i>削除</li>
          </ul>
          <ul class="キーボード州" id="数値" v-if="plateInput.input.dialogVisible && plateInput.input.type !== 'p1'">
            <li v-for="i in Keyboard.number" :class="{num: plateInput.input.type === 'p2' && parseInt(i) >= 0 && parseInt(i) <= 9}" @click.stop="clickKeyboard(i)">{{i}}</li>
            <li class="delete deletes" @click.stop="clickDelete"><i class="icon">&#xe602;</i>削除</li>
          </ul>
        </div>
      </div>
    </div>
</テンプレート>
<スタイル スコープ lang="scss">
  。入力{
    .plateInput{
      パディング:0 20rpx;
      ディスプレイ: フレックス;
      コンテンツの両端揃え: スペースを空ける;
      。アイテム{
        幅: 60rpx;
        高さ: 75rpx;
        境界線:1rpx 実線 #FF5100;
        境界線の半径: 10rpx;
        ディスプレイ: フレックス;
        コンテンツの中央揃え: 中央;
        アイテムの位置を中央揃えにします。
        フォントサイズ: 28rpx;
      }
      。アクティブ{
        境界線の色: #3399ff;
      }
    }
    .bords{
      位置: 固定;
      下部: 0;
      左: 0;
      zインデックス: 999;
      .bor{
        位置: 相対的;
        .btns{
          幅: 100%;
          高さ: 70rpx;
          背景: #fff;
          上境界線:1rpx実線rgba(0,0,0,0.05);
          位置: 絶対;
          ディスプレイ: フレックス;
          コンテンツの両端揃え: スペースの間;
          アイテムの位置を中央揃えにします。
          上: -70rpx;
          左: 0;
          ボタン{
            マージン:0;
          }
        }
      }
      //キーボード.キーボード{
        位置:固定;
        下:0;
        左:0;
        背景色:#ced2d9;
        幅:100%;
        高さ:360rpx;
        マージン:0;
        パディング:0;
        フォントサイズ:36rpx;
        zインデックス:1;
      }
      .キーボード li {
          リストスタイル:なし;
          境界線の半径:10rpx;
      }
      .キーボード li {
          フロート:左;
          背景色:#fefefe;
          左マージン:15rpx;
          上マージン:15rpx;
      }
      .num{
        色: rgba(0,0,0,0.15);
      }
      。州{
        位置: 相対的;
      }
      .州{
        位置: 相対的;
      }
      .province li{
          幅:calc((100% - 15rpx * 11) / 10);
          高さ:calc((100% - 15rpx * 5) / 4);
          ディスプレイ:フレックス;
          ディスプレイ:-webkit-flex;
          アイテムを中央揃えにします。
          -webkit-align-items:center;
          コンテンツの中央揃え: 中央;
          中央揃え
      }
      .province li.delete{
          幅:calc((100% - 15rpx * 11) / 10 * 2 + 15rpx);
      }
      .province li.deletes{
          幅:calc((100% - 15rpx * 11) / 10 * 2 + 90rpx);
      }
      。無効{
        色: rgba(0,0,0,0.15);
      }
    }
  }
</スタイル>

イベント：

エクスポート let life = {
  作成された（）{
    // this.currentPlate = this.plateNumber
    // console.log(this.plateNumber)
    // this.EnterPlateNumber.input.firstWord = this.plateNumber.slice(0,1)
    // this.EnterPlateNumber.input.secondWord = this.plateNumber.slice(1,2)
    // this.EnterPlateNumber.input.lastWords = this.plateNumber.slice(2,9)
  }
}
エクスポートletイベント = {
  クリック入力（タイプ）{
    this.methods('clickInput',type)
  },
  クリックキーボード (値) {
    if (this.plateInput.input.type === 'p2' && parseInt(val) >= 0 && parseInt(val) <= 9) 戻り値
    this.methods('clickKeyboard', val)
    this.methods('setPlateNumber')
    this.methods('setDirectIssuedPlateNumber')
  },
  //ナンバープレートを削除する clickDelete () {
    this.methods('clickDelete')
    this.methods('setPlateNumber')
    this.methods('setDirectIssuedPlateNumber')
  },
  隠しキーボード(){
    this.methods('隠しキーボード')
  },
  入力ワード(){
    this.methods('enterWord')
  }
}
エクスポート let watch = {}

方法:

デフォルトクラスをエクスポートする {
  クリック入力(タイプ){
    this.plateInput.input.type = タイプ
    this.plateInput.input.dialogVisible = true
  }
  隠しキーボード(){
    this.plateInput.input.dialogVisible = false
  }
  入力ワード(){
    this.plateInput.input.dialogVisible = false
  }
  クリックキーボード (値) {
    this.plateInput.input.value[this.plateInput.input.type] = val
    type = this.plateInput.input.type.split('p')[1] とします。
    if (type !== '8') {
      this.plateInput.input.type = 'p' + (parseInt(type) + 1)
    }
  }
  クリック削除() {
    this.plateInput.input.value[this.plateInput.input.type] = 未定義
    nu = this.plateInput.input.type.split('p')[1]-1とする
    nu>=0の場合{
      this.plateInput.input.value['p'+nu] = 未定義
    }
    type = this.plateInput.input.type.split('p')[1] とします。
    if (type !== '1') {
      this.plateInput.input.type = 'p' + (parseInt(type) - 1)
    }
  }
  プレート番号を設定する（）{
    if (this.plateInput.input.plateNumber) {
      this.plateNumber1 = this.plateInput.input.plateNumber
    }それ以外{
      this.plateNumber1 = 未定義
    }
  }
  直接発行プレート番号を設定する（）{
    if (this.plateInput.input.plateNumber) {
      this.plateNumber1 = this.plateInput.input.plateNumber
    }それ以外{
      this.plateNumber1 = 未定義
    }
  }

}

モデルデータ:

エクスポート let props = ['name','plateNumber','noRightPart']
エクスポートletモデル={
  現在のプレート:未定義、
  プレート入力:{
    入力：{
      価値：{
        p1:'グイ',
        p2:'B'、
        p3:2,
        p4:2,
        p5:2,
        p6:2,
        p7:2,
        8:0 より
      },
      タイプ:'p1',
      ダイアログ表示:false
    }
  },
  キーボード: {
    州：[「北京」、「hebei」、「shanxi」、「inner mongolia」、「liaoning」、 'jilin'、 'heilongjiai'、 'jiangsu'、 'zhijang'、 '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' fujian Iang、「Guangdong」、「Chongqing」、「sichuan」、 'guizhou'、 'Yunnan'、 'tibet'、 'shaanxi'、 'cinghai'、 'nanjing'、 'Xinjian ]、、
    数字: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', '学', '香港', '澳']
  },
}
エクスポートlet computed = {
  プレート番号1:{
    得る （） {
      this.plateNumber を返します||''
    },
    設定(値) {
      this.$emit('update:plateNumber', val)
    }
  }
}

ここでは独自のフレームワークが使用されているため、対応するライフサイクル関数は必要に応じて通常の Vue プロジェクトの位置に配置します。イベントは通常の関数として記述され、メソッドは i の通常のメソッド内のメソッドであり、モデルはデータで返されるデータです。

vue.js コンポーネントのチュートリアルについては、特別な vue.js コンポーネント学習チュートリアルをクリックして学習してください。

Vue 学習チュートリアルの詳細については、特別トピック「Vue 実践チュートリアル」をお読みください。

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません: