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;
      }
      .nu​​m{
        色: 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)
    }
  }
}