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代碼

引入數字小鍵盤vue

註冊引入的主鍵

定義的method

我相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

vue動態綁定元件子父元件多表單驗證實作步驟詳解

js封裝ajax功能函數實作步驟詳解

#

以上是vue引入js數字小鍵盤步驟詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！