Maison  >  Article  >  interface Web  >  Explication détaillée des étapes pour introduire le clavier numérique js dans vue

Explication détaillée des étapes pour introduire le clavier numérique js dans vue

php中世界最好的语言
php中世界最好的语言original
2018-05-21 15:18:272490parcourir

Cette fois je vais vous donner une explication détaillée des étapes pour introduire le pavé numérique js dans vue. Quelles sont les précautions pour introduire le pavé numérique js dans vue. jetez un oeil.

L'effet est le suivant :

Le code est le suivant :

clavier.vue

<template> 
 <p class="keyboard" v-show="showKeyboard" v-clickoutside="closeModal"> 
  <p v-for="keys in keyList"> 
   <template v-for="key in keys"> 
    <i v-if="key === &#39;top&#39;" @click.stop="clickKey" class="iconfont icon-zhiding tab-top"></i> 
    <i v-else-if="key === &#39;123&#39;" @click.stop="clickKey" class="tab-num">123</i> 
    <i v-else-if="key === &#39;del&#39;" @click.stop="clickKey" id="del" class="iconfont icon-delete key-delete"></i> 
    <i v-else-if="key === &#39;blank&#39;" @click.stop="clickKey" class="iconfont icon-konggejian-jianpanyong tab-blank"></i> 
    <i v-else-if="key === &#39;symbol&#39;" @click.stop="clickKey" class="tab-symbol">符</i> 
    <i v-else-if="key === &#39;point&#39;" @click.stop="clickKey" class="tab-point">·</i> 
    <i v-else-if="key === &#39;enter&#39;" @click.stop="clickKey" class="iconfont icon-huiche tab-enter"></i> 
    <i v-else @click.stop="clickKey" >{{key}}</i> 
   </template> 
  </p> 
 </p> 
</template> 
<script> 
import clickoutside from '../../directives/clickoutside' 
export default { 
 directives: { clickoutside }, 
 data() { 
  return { 
   keyList: [], 
   status: 2,//0 小写 1 大写 2 数字 3 符号 
   lowercase: [ 
    ['7', '8', '9'], 
    ['4', '5', '6'], 
    ['1', '2', '3'], 
    ['.','0','del'], 
   ], 
   //equip:!!navigator.userAgent.toLocaleLowerCase().match(/ipad|mobile/i)//是否是移动设备 
  } 
 }, 
 props: { 
  option: { 
   type: Object 
  } 
 }, 
 computed: { 
  showKeyboard(){ 
   return this.option.show 
  } 
 }, 
 mounted() { 
  this.keyList = this.lowercase 
 }, 
 methods: { 
  tabHandle({ value = '' }) { 
   if(value.indexOf('tab-num') > -1){ 
     this.status = 2 
     //数字键盘数据 
   }else if(value.indexOf('key-delete') > -1){ 
    console.log(value.indexOf('key-delete')) 
    this.emitValue('delete') 
   }else if(value.indexOf('tab-blank') > -1){ 
    this.emitValue(' ') 
   }else if(value.indexOf('tab-enter') > -1){ 
    this.emitValue('\n') 
   }else if(value.indexOf('tab-point') > -1){ 
    this.emitValue('.') 
   }else if(value.indexOf('tab-symbol') > -1){ 
    this.status = 3 
   }else if(value.indexOf('tab-top') > -1){ 
    if(this.status === 0){ 
     this.status = 1 
    }else{ 
     this.status = 0 
     this.keyList = this.lowercase 
    } 
   }else{ 
   } 
  }, 
  clickKey(event) { 
   // if(event.type === 'click' && this.equip) return 
   let value = event.srcElement.innerText; 
   let id = event.srcElement.id; 
   let target = event.srcElement ? event.srcElement : event.target; 
   if(id !== '' && id === 'del'){//如果点击的是id为del的表示是删除 
    this.emitValue(id); 
   }else{//否则 
    value && id !== 'del'? this.emitValue(value) : this.tabHandle(target.classList); 
   } 
  }, 
  emitValue(key) { 
   console.log(key) 
   this.$emit('keyVal', key) 
  }, 
  closeModal(e) { 
   if (e.target !== this.option.sourceDom) { 
    // this.showKeyboard = false 
    this.$emit('close', false) 
   } 
  } 
 } 
} 
</script> 
<style scoped lang="less"> 
keyboard { 
  display: inline-block; 
 width: 263px; 
 font-size: 18px; 
 border-radius: 2px; 
 background-color: #e5e6e8; 
 user-select: none; 
 bottom: 0; 
 position: absolute;/*定位数字键盘*/ 
 left: -20px; 
 top: 77px; 
 z-index: 999; 
 pointer-events: auto; 
 p { 
  width: 100%; 
  margin: 0 auto; 
  height: 42px; 
  margin-bottom: 0.5em; 
  display: flex; 
  display: -webkit-box; 
  flex-direction: row; 
  flex-wrap: nowrap; 
  justify-content: center; 
  i { 
   display: block; 
   margin: 0 0.2%; 
   height: 50px; 
   line-height: 52px; 
   font-style: normal; 
   font-size: 24px; 
   border-radius: 3px; 
   width: 44px; 
   background-color: #fff; 
   text-align: center; 
   flex-grow: 1; 
   flex-shrink: 1; 
   flex-basis: 0; 
   -webkit-box-flex: 1; 
   &:active { 
    background-color: darken(#ccc, 10%); 
   } 
  } 
  .tab-top { 
   width: 50px; 
   margin: 0 1%; 
   background: #cccdd0; 
   color: #fff; 
   font-size: 24px; 
  } 
  .key-delete { 
   width: 47px; 
   margin: 0 0.2%; 
   color: #827f7f; 
   background: ; 
  } 
  .tab-num { 
   font-size: 18px; 
   background: #dedede; 
   color: #5a5959; 
  } 
  .tab-point { 
   width: 20px; 
  } 
  .tab-blank { 
   width: 50px; 
   font-size: 12px; 
   padding: 0 15px; 
   color: #5a5959; 
   line-height: 60px; 
  } 
  .tab-symbol { 
   width: 20px; 
   font-size: 18px; 
  } 
  .tab-enter { 
   font-size: 30px; 
   line-height: 54px; 
  } 
  &:nth-child(2) { 
   width: 100%; 
  } 
 } 
} 
</style>

est introduit sur la page d'utilisation Code :

code html

Présentation de la vue du pavé numérique

Enregistrement de la clé primaire introduite

méthode définie

Je pense que vous maîtrisez la méthode après avoir lu le C'est le cas dans cet article. Pour des choses plus intéressantes, veuillez prêter attention à php Chinois Autres articles connexes en ligne !

Lecture recommandée :

Explication détaillée des étapes pour implémenter la vérification multiforme des composants de liaison dynamique vue, des composants enfants et parents

JS encapsulé ajax Explication détaillée des étapes de mise en œuvre des fonctions fonctionnelles

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn