vue를 사용하여 js 숫자 키패드를 소개하는 방법

이번에는 vue를 사용하여 js 숫자 키패드를 소개하는 방법을 보여드리겠습니다. vue를 사용하여 js 숫자 키패드를 소개할 때 주의 사항은 무엇입니까?

효과는 다음과 같습니다:

코드는 다음과 같습니다:

keyboard.vue

<template> 
 <p> 
  </p>
<p> 
   <template> 
    <i></i> 
    <i>123</i> 
    <i></i> 
    <i></i> 
    <i>符</i> 
    <i>·</i> 
    <i></i> 
    <i>{{key}}</i> 
   </template> 
  </p> 
  
</template> 
<script> 
import clickoutside from &#39;../../directives/clickoutside&#39; 
export default { 
 directives: { clickoutside }, 
 data() { 
  return { 
   keyList: [], 
   status: 2,//0 小写 1 大写 2 数字 3 符号 
   lowercase: [ 
    [&#39;7&#39;, &#39;8&#39;, &#39;9&#39;], 
    [&#39;4&#39;, &#39;5&#39;, &#39;6&#39;], 
    [&#39;1&#39;, &#39;2&#39;, &#39;3&#39;], 
    [&#39;.&#39;,&#39;0&#39;,&#39;del&#39;], 
   ], 
   //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 = &#39;&#39; }) { 
   if(value.indexOf(&#39;tab-num&#39;) > -1){ 
     this.status = 2 
     //数字键盘数据 
   }else if(value.indexOf(&#39;key-delete&#39;) > -1){ 
    console.log(value.indexOf(&#39;key-delete&#39;)) 
    this.emitValue(&#39;delete&#39;) 
   }else if(value.indexOf(&#39;tab-blank&#39;) > -1){ 
    this.emitValue(&#39; &#39;) 
   }else if(value.indexOf(&#39;tab-enter&#39;) > -1){ 
    this.emitValue(&#39;\n&#39;) 
   }else if(value.indexOf(&#39;tab-point&#39;) > -1){ 
    this.emitValue(&#39;.&#39;) 
   }else if(value.indexOf(&#39;tab-symbol&#39;) > -1){ 
    this.status = 3 
   }else if(value.indexOf(&#39;tab-top&#39;) > -1){ 
    if(this.status === 0){ 
     this.status = 1 
    }else{ 
     this.status = 0 
     this.keyList = this.lowercase 
    } 
   }else{ 
   } 
  }, 
  clickKey(event) { 
   // if(event.type === &#39;click&#39; && this.equip) return 
   let value = event.srcElement.innerText; 
   let id = event.srcElement.id; 
   let target = event.srcElement ? event.srcElement : event.target; 
   if(id !== &#39;&#39; && id === &#39;del&#39;){//如果点击的是id为del的表示是删除 
    this.emitValue(id); 
   }else{//否则 
    value && id !== &#39;del&#39;? this.emitValue(value) : this.tabHandle(target.classList); 
   } 
  }, 
  emitValue(key) { 
   console.log(key) 
   this.$emit(&#39;keyVal&#39;, key) 
  }, 
  closeModal(e) { 
   if (e.target !== this.option.sourceDom) { 
    // this.showKeyboard = false 
    this.$emit(&#39;close&#39;, false) 
   } 
  } 
 } 
} 
</script> 
<style> 
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>

사용 페이지에 코드 소개:

html code

숫자 키패드 vue 소개

기본 키로 정의된 메소드 등록 소개

원본 링크:https://blog.csdn.net/qq_39313596/article/details/80294387감사합니다 원본 이 글을 쓴 저자입니다

이 글을 읽었다고 생각합니다. 사례 방법을 마스터하셨으니 더 흥미로운 정보를 원하시면 PHP 중국어 웹사이트의 다른 관련 글을 주목해 주세요!

추천 자료:

JS의 일반적인 내장 함수 사용에 대한 자세한 설명

js를 사용하여 Ajax 함수 함수 및 사용법을 캡슐화하는 방법

위 내용은 vue를 사용하여 js 숫자 키패드를 소개하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!