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"></i>削除</li> -->
<li class="delete" @click.stop="deleteAlb"><i class="icon"></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"></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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: Ubuntu でパスワードを変更し、パスワードの複雑さのポリシーを設定する方法
>>: MySQLトランザクションの特徴と分離レベルについてお話ししましょう
推薦する
mysql エラー 1045 (28000) - ユーザーへのアクセスが拒否される問題を解決する方法
問題の説明 (以下の説明は Windows 環境に限定されます): D:\develop\ide\m...
Nginx でバージョン番号と Web ページのキャッシュ時間を非表示にする方法
Nginx の最適化 - バージョン番号と Web ページのキャッシュ時間を非表示にするバージョン番...
CSS における px、em、rem、%、vw、vh 単位の違いの詳細な説明
1.ピクセルpx はピクセルの略語で、画面解像度に対する相対的な長さの単位です。 2. えむ参照は親...
JS配列の組み込みトラバーサルメソッドとその違いについての簡単な説明
目次forEach() (ES6) メソッドmap() (ES6) メソッドflatMap() メソ...
MySQLアカウントのパスワード変更方法（概要）
序文：データベースを日常的に使用すると、パスワードが単純すぎて変更する必要がある場合、パスワードの有...
CSSレイアウトで中央揃えレイアウトを実現する方法
1. 親コンテナーをテーブルに設定し、子をインライン要素に設定します。テキストを表示するサブコンテン...
DIVまたはDIVで画像を水平方向と垂直方向に中央揃えする方法
<div class="box"> <画像 /> &l...
h5入力ボックスプロンプト+通常のテキストボックスプロンプトを実装する方法
XML/HTML コードコンテンツをクリップボードにコピー<入力 id = "ユーザ...
Linux でのマルチスレッドプログラミング例の分析
1 はじめにスレッド技術は 1960 年代にすでに提案されていましたが、マルチスレッドがオペレーティ...
MySQL 8 の新機能: 非表示のインデックス
背景インデックスは諸刃の剣です。クエリ速度は向上しますが、DML 操作も遅くなります。結局のところ、...
Docker がポート 2375 を公開し、サーバー攻撃を引き起こす問題と解決策
docker リモート API を学習した学生であれば、ポート 2375 についてよくご存知だと思い...
Linux システムで Java 環境変数を設定する方法
Java環境変数を設定するここで、環境変数は etc/profile に設定され、つまり、すべてのユ...
HTMLエンコードによる文字化け問題について
今日、3年生から質問がありました。彼が書いた HTML コードを開くと、文字化けした文字が表示されま...
React スキャフォールディングの構築方法を学ぶ
1. フロントエンドエンジニアリングの複雑さいくつかの小さなデモ プログラムを開発するだけであれば、...
MySQL 5.7 の一時テーブルスペースを使用して落とし穴を回避する方法
導入MySQL 5.7 は、SSL/TLS と全体的なセキュリティ開発におけるいくつかの重要な変更に...