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

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

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

コード：

vueコード:

<テンプレート>
    <div class="pulls">
      <!-- 正確なナンバープレート検索-->
      <div class="enterPlate">
        <div class="enterBox" :style="{width:noRightPart==='on'?'100%':''}">
          <div :class="['prov',EnterPlateNumber.input.whitchKey===0?'isEntering':'']" @click.stop="enterProv">{{EnterPlateNumber.input.firstWord}}</div>
          <div :class="['alb',EnterPlateNumber.input.whitchKey===1?'isEntering':'']" @click.stop="enterAlbn">{{EnterPlateNumber.input.secondWord}}</div>
          <div :class="['plate',EnterPlateNumber.input.whitchKey===2?'isEntering':'']" :style="{width:noRightPart==='on'?'350rpx':''}" @click.stop="enterLastn">{{EnterPlateNumber.input.lastWords}}</div>
        </div>
        <div class="doneBox">
          <div class="doneLeft">
            <button type="primary" size="small" @click="toSearch">検索</button>
          </div>
          <div class="doneRight" v-if="noRightPart!='on'">
            <u-icon name="リストドット"></u-icon>
            フィルター
        </div>
      </div>

      <!-- キーボードポップアップボックス-->
      <!-- 地方略語 -->
      <div class="MASK" v-if="EnterPlateNumber.input.showProvince===true" :style="{width:noNeedMask==='y'?0:'',height:noNeedMask==='y'?0:'',marginTop:maskTop?maskTop/75+'rem':0+'rem'}">
        <div class="州">
          <div class="btns">
            <button type="primary" size="small" plain @click="hiddenKeybord">キャンセル</button>
            <!-- <button type="primary" size="small" plain @click="changeKeyBord">キーボードを切り替える</button> -->
            <button type="primary" size="small" plain @click="enterWord">確認</button>
          </div>
          <ul class="キーボード 州" id="州">
            <li v-for="(item,index) in EnterPlateNumber.input.provinceList" :key="index" @click.stop="enterPro(item)">{{item.provinceName}}</li>
            <!-- <li class="delete" @click.stop="deletePro"><i class="icon">&#xe602;</i>削除</li> -->
            <li class="delete" @click.stop="deleteAlb"><i class="icon">&#xe602;</i>削除</li>
          </ul>
        </div>
      </div>
      
      <!-- 数字と文字 -->
      <div class="MASK" v-if="EnterPlateNumber.input.showAlb===true" :style="{width:noNeedMask==='y'?0:'',height:noNeedMask==='y'?0:'',marginTop:maskTop?maskTop/75+'rem':0+'rem'}">
        <div class="province 州" >
          <div class="btns">
            <button type="primary" size="small" plain @click="hiddenKeybord">キャンセル</button>
            <!-- <button type="primary" size="small" plain @click="changeKeyBord">キーボードを切り替える</button> -->
            <button type="primary" size="small" plain @click="enterWord">確認</button>
          </div>
          <ul class="キーボード番号" id="番号" >
            <li :class="['num',EnterPlateNumber.input.whitchKey===1?'disabled':'']" v-if="item.isNumber===true" v-for="(item) が EnterPlateNumber.input.plateAlbList 内" :key="item.AlbName" @click.stop="enterAlb(item)">{{item.AlbName}}</li>
            <li v-if="item.isNumber===false" v-for="(item) in EnterPlateNumber.input.plateAlbList" :key="item.AlbName" @click.stop="enterAlb(item)">{{item.AlbName}}</li>
            <li class="delete deletes" @click.stop="deleteAlb"><i class="icon">&#xe602;</i>削除</li>
          </ul>
        </div>
      </div>
    </div>
</テンプレート>
<スタイル スコープ lang="scss">
  .enterPlate{
    高さ: 70rpx;
    背景: #fff;
    パディング:10rpx 20rpx;
    ディスプレイ: フレックス;
    アイテムの位置を中央揃えにします。
    .enterBox{
      幅: 73%;
      ディスプレイ: フレックス;
      .isEntering{
        境界線の色: rgb(57,195,153);
      }
      div{
        幅: 70rpx;
        高さ: 70rpx;
        行の高さ: 75rpx;
        境界線:1.5rpx実線rgba(0,0,0,0.15);
        境界線の半径: 10rpx;
        背景: #fff;
        右マージン: 20rpx;
        フォントサイズ: 30rpx;
        テキスト配置: 中央;
      }
      。皿{
        幅: 300rpx;
        高さ: 70rpx;
        テキスト配置: 左;
        テキストインデント: 10rpx;
      }
    }
    .doneBox{
      幅: 27%;
      ディスプレイ: フレックス;
      コンテンツの両端揃え: スペースの間;
      アイテムの位置を中央揃えにします。
      .完了{
        ディスプレイ: フレックス;
        flex-direction: 列;
        コンテンツの中央揃え: 中央;
        アイテムの位置を中央揃えにします。
      }
    }
    ボタン{
      高さ: 70rpx;
      パディング:0 10rpx;
      行の高さ: 70rpx;
    }

  }
    .pulls{
      // パディング: 0 0 20rpx 0;
      背景: #fff;
      。名前{
        高さ: 60rpx;
        行の高さ: 60rpx;
        フォントサイズ: 28rpx;
        色:rgba(0,0,0,0.85);
        // フォントの太さ: 太字;
      }
      .プレートボックス{
        高さ: 100rpx;
        ディスプレイ: フレックス;
        コンテンツの両端揃え: スペースの間;
        .p左{
          幅: 50%;
          高さ: 100rpx;
          オーバーフロー: 非表示;
          画像{
            幅: 100%;
          }
        }
        .p右{
          幅: 50%;
          高さ: 100rpx;
          左パディング: 10rpx;
          境界線:1rpx実線rgb(57,195,153);
          ディスプレイ: フレックス;
          アイテムの位置を中央揃えにします。
          。遅い{
            フォントの太さ: 太字;
            フォントサイズ: 30rpx;
            幅: 60%;
            高さ: 100rpx;
            行の高さ: 100rpx;
            入力{
              高さ: 100%;
            }
          }
          ボタン{
            境界線:1rpx実線rgb(57,195,153);
          }
        }
      }
      。マスク{
        位置: 固定;
        下部: 0;
        左: 0;
        zインデックス: 9999;
      }
      //キーボード.キーボード{
        位置:固定;
        下:0;
        左:0;
        背景色:#ced2d9;
        幅:100%;
        高さ:360rpx;
        マージン:0;
        パディング:0;
        フォントサイズ:36rpx;
        zインデックス:1;
      }
      .キーボード li {
          リストスタイル:なし;
          境界線の半径:10rpx;
      }
      .キーボード li {
          フロート:左;
          背景色:#fefefe;
          左マージン:15rpx;
          上マージン:15rpx;
      }
      。州{
        位置: 相対的;
        .btns{
          幅：100vw;
          高さ: 70rpx;
          背景: #fff;
          上境界線:1rpx実線rgba(0,0,0,0.05);
          位置: 絶対;
          ディスプレイ: フレックス;
          コンテンツの両端揃え: スペースの間;
          アイテムの位置を中央揃えにします。
          上: -70rpx;
          左: 0;
          ボタン{
            マージン:0;
          }
        }
      }
      .州{
        位置: 相対的;
        .btns{
          幅：100vw;
          高さ: 70rpx;
          背景: #fff;
          上境界線:1rpx実線rgba(0,0,0,0.05);
          位置: 絶対;
          ディスプレイ: フレックス;
          コンテンツの両端揃え: スペースの間;
          アイテムの位置を中央揃えにします。
          上: -428rpx;
          左: 0;
          ボタン{
            マージン:0;
          }
        }
      }
      .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 + 155rpx);
      }
      。無効{
        色: rgba(0,0,0,0.15);
      }
    }
</スタイル>

イベント：

エクスポート let life = {
  作成された（）{
    this.currentPlate = this.plateNumber
    console.log(このプレート番号)
    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イベント = {
  toSearch(){
    this.methods('hiddenKeybord',2)
    this.$emit('confirmChangePlate')
  },
  プレートを変更する(){
    //キーボードを表示する this.methods('changePlate')
    this.methods('saveOringinPlate')
  },
  //hiddenKeybord() をキャンセル{
    this.methods('hiddenKeybord',2)
  },
  //enterWord() の確認{
    this.methods('enterWord')
    this.methods('隠しキーボード',1)
  },
  //変更 confirmChangePlate(){
    this.$emit('confirmChangePlate')
  },
  // 州入力ボックスをクリックします。enterProv(){
    this.methods('enterProv',true)
  },
  //州をクリックする async enterPro(item){
    isOk = this.methods('enterPro',item) を待機します。
    if(isOk){
      this.methods('enterAlbn',true)
    }
  },
  //州を削除する deletePro(){
    this.methods('deletePro')
  },

  //文字入力ボックスをクリックする enterAlbn(){
    this.methods('enterAlbn',true)
  },
  //数字をクリックする async enterAlb(item){
    isOk = this.methods('enterAlb',item) を待機します。
    if(isOk===2){
      this.methods('setKey',2)
    }
  },
  //数字キーボードの削除 async deleteAlb(){
    isOk = this.methods('deleteAlb') を待機します。
    if(isOk === 1){
      this.methods('setKey',0)
      this.methods('enterProv',true)
      this.EnterPlateNumber.input.firstWord = ''
    }
    if(isOk===2){
      this.methods('setKey',2)
      // this.methods('enterAlbn',true)
    }
    if(isOk===3){
      this.methods('setKey',1)
      // this.methods('enterAlbn',true)
      this.EnterPlateNumber.input.secondWord = ''
    }
  },

  //残りの文字ボックスをクリックします enterLastn(){
    this.methods('enterLastn',true)
  },

  //検索 clickSearch(){
    str1 = this.EnterPlateNumber.input.firstWord とします
    str2 = this.EnterPlateNumber.input.secondWord とします。
    str3 = this.EnterPlateNumber.input.lastWords とします
    this.$emit('clickSearch',str1+str2+str3)
  },
}
エクスポート let watch = {}

方法:

デフォルトクラスをエクスポートする {
  入力ワード(){
    // this.$emit('update:plateNumber', this.plateNumber1)
  }

  隠しキーボード(val){
    if(val===2){
      コンソールログ(this.currentPlate)
      this.plateNumber1 = this.currentPlate
      this.EnterPlateNumber.input.firstWord = this.currentPlate.slice(0,1)
      this.EnterPlateNumber.input.secondWord = this.currentPlate.slice(1,2)
      this.EnterPlateNumber.input.lastWords = this.currentPlate.slice(2,9)
      this.EnterPlateNumber.input.showProvince = false
      this.EnterPlateNumber.input.showAlb = false
    }
    if(val===1){
      this.EnterPlateNumber.input.showProvince = false
      this.EnterPlateNumber.input.showAlb = false
    }
    
  }

  入力Prov(val){
    this.EnterPlateNumber.input.showProvince = val
    this.EnterPlateNumber.input.showAlb = false
    this.EnterPlateNumber.input.whitchKey = 0
  }

  setKey(val){
    this.EnterPlateNumber.input.whitchKey = val
  }

  非同期enterPro(val){
    isOk = false とします
    this.EnterPlateNumber.input.firstWord = val.provinceName
    if(this.EnterPlateNumber.input.firstWord!=''){
      正常かどうか = 真
    }
    戻り値 isOk
  }

  削除Pro(){
    this.EnterPlateNumber.input.firstWord = ''
  }

  EnterAlbn(val){
    this.EnterPlateNumber.input.showAlb = val
    this.EnterPlateNumber.input.showProvince = false
    this.EnterPlateNumber.input.whitchKey = 1
  }

  非同期EnterAlb(val){
    isOk = 1 とします
    if(this.EnterPlateNumber.input.whitchKey === 1&typeof(val.AlbName)==='number'){
      正常 = 1
      戻る
    }
    if (this.EnterPlateNumber.input.whitchKey === 1) {
      正常 = 2
      this.EnterPlateNumber.input.secondWord = val.AlbName
    }
    if (this.EnterPlateNumber.input.whitchKey === 2) {
      正常 = 3
      str = val.AlbName.toString() とします。
      if(this.EnterPlateNumber.input.lastWords.length>5){
        uni.showToast({
          アイコン: "なし",
          期間: 1000、
          位置: 'トップ'、
          タイトル: 「ナンバープレートの番号は8桁を超えることはできません」
        })
        戻る
      }それ以外{
        this.EnterPlateNumber.input.lastWords+=str
      }
    }
    戻り値 isOk
  }

  最終nを入力(val){
    this.EnterPlateNumber.input.showAlb = val
    this.EnterPlateNumber.input.showProvince = false
    this.EnterPlateNumber.input.whitchKey = 2
  }

  非同期削除Alb(){
    isOk = 0 とします
    if (this.EnterPlateNumber.input.whitchKey === 1) {
      this.EnterPlateNumber.input.secondWord = ''
      正常 = 1
    }
    if (this.EnterPlateNumber.input.whitchKey === 2) {
      len = this.EnterPlateNumber.input.lastWords.lengthとします
      this.EnterPlateNumber.input.lastWords = this.EnterPlateNumber.input.lastWords.substr(0, this.EnterPlateNumber.input.lastWords.length - 1)
      レン--
      コンソール.log(長さ)
      長さ===-1の場合{
        if(this.EnterPlateNumber.input.lastWords===''){
          正常 = 3
        }それ以外{
          正常 = 2
        }
      }
    }
    戻り値 isOk
  }

  スイッチカラーセレクター() {
    this.selectVisible = !this.selectVisible
  }

  setColor (色) {
    this.currentColor = 色
  }

}

モデルデータ:

エクスポート let props = ['name','plateNumber','noRightPart']
エクスポートletモデル={
  現在のプレート:未定義、
  プレート番号を入力してください:{
    入力：{
      最初の単語:''、
      2番目の単語:''、
      最後の言葉:''、
      州リスト:[
        {provinceName:'京',id:'京'},
        {provinceName:'Jin',id:'Jin'},
        {provinceName:'冀',id:'冀'},
        {provinceName:'晋',id:'晋'},
        {provinceName:'蒙',id:'蒙'},
        {provinceName:'遼',id:'遼'},
        {provinceName:'吉',id:'吉'},
        {provinceName:'黒',id:'黒'},
        {provinceName:'沪',id:'沪'},
        {provinceName:'苏',id:'苏'},
        {provinceName:'浙',id:'浙'},
        {provinceName:'皖',id:'皖'},
        {provinceName:'闽',id:'闽'},
        {provinceName:'赣',id:'赣'},
        {provinceName:'Lu',id:'Lu'},
        {provinceName:'豫',id:'豫'},
        {provinceName:'鄂',id:'鄂'},
        {provinceName:'湘',id:'湘'},
        {provinceName:'粤',id:'粤'},
        {provinceName:'Gui',id:'Gui'},
        {provinceName:'琼',id:'琼'},
        {provinceName:'渝',id:'渝'},
        {provinceName:'川',id:'川'},
        {provinceName:'贵',id:'贵'},
        {provinceName:'云',id:'云'},
        {provinceName:'藏',id:'藏'},
        {provinceName:'陕',id:'陕'},
        {provinceName:'ガン',id:'ガン'},
        {provinceName:'青',id​​:'青'},
        {provinceName:'宁',id:'宁'},
        {provinceName:'新',id:'新'},
        {provinceName:'台',id:'台'},
        {provinceName:'港',id:'港'},
        {provinceName:'澳',id:'澳'},
        {provinceName:'使',id:'使'},
        {provinceName:'領',id:'領'},
        {provinceName:'警',id:'警'},
        {provinceName:'学',id:'学'},
      ]、
      プレートアルバリスト:[
        {AlbName:0,id:'0',isNumber:true},
        {AlbName:1,id:'1',isNumber:true},
        {AlbName:2,id:'2',isNumber:true},
        {AlbName:3,id:'3',isNumber:true},
        {AlbName:4,id:'4',isNumber:true},
        {AlbName:5,id:'5',isNumber:true},
        {AlbName:6,id:'6',isNumber:true},
        {AlbName:7,id:'7',isNumber:true},
        {AlbName:8,id:'8',isNumber:true},
        {AlbName:9,id:'9',isNumber:true},
        {AlbName:'A',id:'A',isNumber:false},
        {AlbName:'B'、id:'B'、isNumber:false}、
        {AlbName:'C'、id:'C'、isNumber:false}、
        {AlbName:'D'、id:'D'、isNumber:false}、
        {AlbName:'E',id:'E',isNumber:false},
        {AlbName:'F'、id:'F'、isNumber:false}、
        {AlbName:'G'、id:'G'、isNumber:false}、
        {AlbName:'H'、id:'H'、isNumber:false}、
        {AlbName:'J'、id:'J'、isNumber:false}、
        {AlbName:'K'、id:'K'、isNumber:false}、
        {AlbName:'L'、id:'L'、isNumber:false}、
        {AlbName:'M'、id:'M'、isNumber:false}、
        {AlbName:'N'、id:'N'、isNumber:false}、
        {AlbName:'P'、id:'P'、isNumber:false}、
        {AlbName:'Q',id:'Q',isNumber:false},
        {AlbName:'R',id:'R',isNumber:false},
        {AlbName:'S'、id:'S'、isNumber:false}、
        {AlbName:'T'、id:'T'、isNumber:false}、
        {AlbName:'U',id:'U',isNumber:false},
        {AlbName:'V'、id:'V'、isNumber:false}、
        {AlbName:'W',id:'W',isNumber:false},
        {AlbName:'X'、id:'X'、isNumber:false}、
        {AlbName:'Y'、id:'Y'、isNumber:false}、
        {AlbName:'Z'、id:'Z'、isNumber:false}、
        {AlbName:'学',id:'学',isNumber:false},
        {AlbName:'港',id:'港',isNumber:false},
        {AlbName:'澳',id:'澳,isNumber:false'}
      ]、
      showProvince:false, // 州を表示 showAlb:false, // 文字キーボードを表示 whitchKey:0
    }
  },
  選択可視: false、
}
エクスポートlet computed = {
  プレート番号1:{
    得る （） {
      this.plateNumber を返します||''
    },
    設定(値) {
      this.$emit('update:plateNumber', val)
    }
  }
}

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

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

以下もご興味があるかもしれません:
  • Vueナンバープレート入力コンポーネントの使い方の詳しい説明
  • Vue3+Vantコンポーネントを使用してアプリの検索履歴機能を実装する（サンプルコード）
  • Vue elementuiは、検索バーのパブリックコンポーネントのカプセル化のサンプルコードを実装します。
  • Vue2.x の一般的な条件検索コンポーネントのカプセル化と適用の詳細な説明
  • Vue コンポーネントの練習検索可能なドロップダウン ボックス機能
  • Vue ドロップダウン メニュー コンポーネントの実装コード (検索を含む)
  • Vue.js プロジェクトの el-input コンポーネントは Enter キーをリッスンして検索機能を実装する例
  • Vue ベースの検索可能なドロップダウン ボックスのカスタム コンポーネントを実装する
  • Vueコンポーネントは検索可能なドロップダウンボックス拡張を実装します
  • Vue2.0 マルチ条件検索コンポーネントの使い方の詳しい説明

<<:  Ubuntu でパスワードを変更し、パスワードの複雑さのポリシーを設定する方法

>>:  MySQLトランザクションの特徴と分離レベルについてお話ししましょう

推薦する

MySQLクエリ最適化プロセスを理解する

目次パーサーとプリプロセッサクエリオプティマイザーMySQL クエリの最適化には、解析、前処理、最適...

RoughViz を使用して Vue.js でスケッチされたチャートを視覚化する方法

導入チャートは、データ セットを読みやすくし、その各部分を区別しやすくするために使用されるデータのグ...

Vueソースコード解析における仮想DOMの詳しい説明

なぜ仮想DOMが必要なのでしょうか?仮想 DOM はブラウザのパフォーマンス問題を解決するために設計...

MySQL 5.7.18 無料インストールバージョンの設定チュートリアル

MySQL 5.7.18 無料インストール版のインストールチュートリアルMySQL は現在、世界で最...

HTML 左、中央、右の適応レイアウト (calc css 式を使用)

最新の HTML 標準には、レイアウトを計算するために使用できる calc CSS 式があります。し...

nginx ip ブラックリストの動的禁止の例

ウェブサイトが悪意を持ってリクエストされた場合、IP アドレスをブラックリストに登録することは重要な...

JavaScript のデシェイクとスロットリングの例

目次安定スロットル: 手ぶれ防止: 一定時間内に最後のタスクのみを実行します。スロットル: 一定期間...

JavaScript が Jingdong の虫眼鏡の特殊効果を模倣

この記事では、Jingdong虫眼鏡を模倣したJavaScriptの具体的なコードを参考までに共有し...

ウェブサイト上で flv/MP4 やその他のビデオ ファイルを再生できない問題は、MIME タイプに関連しています。

ウェブサイトを作成している際に、flv や MP4 形式などのビデオ ファイルはローカルでは正常に再...

Linux 上の MYSQL 5.7 でルート パスワードを取得する際の問題 (テスト済み、利用可能)

目次1. --skip-grant-tables 経由で取得する1.1 my.conf を変更し、新...

シンプルなドラッグ効果を実現するjs

この記事では、簡単なドラッグ効果を実現するためのjsの具体的なコードを参考までに共有します。具体的な...

Linux でディスク IO を表示し、読み取りと書き込みで高い IO を占有するプロセスを見つけます。

背景 - オンラインアラートオンライン サーバーがアラームを発し、ディスク使用率 disk.util...

MySQL の日付と時刻関数の概要 (MySQL 5.X)

1. MySQLは現在の日付と時刻を取得する関数1.1 現在の日付 + 時刻 (日付 + 時刻) ...

海外でダウンロードできる25個の新鮮で便利なアイコンセット

1. Eコマースアイコン2. アイコンスイーツ2 3. 携帯電話アイコンパック4. 旗アイコンセット...

Alibaba Cloud ServerにMySQLデータベースをインストールする方法の詳細な説明

序文学習中に Zookeeper をインストールする必要があったため、仮想マシンに常に問題が発生した...