vue引入js数字小键盘的实现代码


Posted in Javascript onMay 14, 2018

效果如图:

vue引入js数字小键盘的实现代码

代码如下:

  keyboard.vue

<template> 
 <div class="keyboard" v-show="showKeyboard" v-clickoutside="closeModal"> 
  <p v-for="keys in keyList"> 
   <template v-for="key in keys"> 
    <i v-if="key === 'top'" @click.stop="clickKey" class="iconfont icon-zhiding tab-top"></i> 
    <i v-else-if="key === '123'" @click.stop="clickKey" class="tab-num">123</i> 
    <i v-else-if="key === 'del'" @click.stop="clickKey" id="del" class="iconfont icon-delete key-delete"></i> 
    <i v-else-if="key === 'blank'" @click.stop="clickKey" class="iconfont icon-konggejian-jianpanyong tab-blank"></i> 
    <i v-else-if="key === 'symbol'" @click.stop="clickKey" class="tab-symbol">符</i> 
    <i v-else-if="key === 'point'" @click.stop="clickKey" class="tab-point">·</i> 
    <i v-else-if="key === 'enter'" @click.stop="clickKey" class="iconfont icon-huiche tab-enter"></i> 
    <i v-else @click.stop="clickKey" >{{key}}</i> 
   </template> 
  </p> 
 </div> 
</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>

在使用页面引入代码:

html代码

vue引入js数字小键盘的实现代码

引入数字小键盘vue

vue引入js数字小键盘的实现代码

注册引入的主键

vue引入js数字小键盘的实现代码

定义的method

vue引入js数字小键盘的实现代码

总结

以上所述是小编给大家介绍的vue引入js数字小键盘的实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript 客户端验证上传图片的大小(兼容IE和火狐)
Aug 15 Javascript
picChange 图片切换特效的函数代码
May 06 Javascript
Javascript 异步加载详解(浏览器在javascript的加载方式)
May 20 Javascript
JS判断当前日期是否大于某个日期的实现代码
Sep 02 Javascript
给超链接添加特效鼠标移动展示提示信息且随鼠标移动
Oct 17 Javascript
jQuery插件开发的五种形态小结
Mar 04 Javascript
javascript弹出拖动窗口
Aug 11 Javascript
JavaScript数据绑定实现一个简单的 MVVM 库
Apr 08 Javascript
JavaScript操作文件_动力节点Java学院整理
Jun 30 Javascript
使用Node.js实现ORM的一种思路详解(图文)
Oct 24 Javascript
详解使用VueJS开发项目中的兼容问题
Aug 02 Javascript
详解微信小程序开发聊天室—实时聊天,支持图片预览
May 20 Javascript
vue移动端路由切换实例分析
May 14 #Javascript
对node.js中render和send的用法详解
May 14 #Javascript
利用vscode调试编译后的js代码详解
May 14 #Javascript
vue的toast弹窗组件实例详解
May 14 #Javascript
Vue页面骨架屏注入方法
May 13 #Javascript
浅谈在node.js进入文件目录的问题
May 13 #Javascript
解决node修改后需频繁手动重启的问题
May 13 #Javascript
You might like
详细介绍PHP应用提速面面观
2006/10/09 PHP
PHP脚本数据库功能详解(下)
2006/10/09 PHP
php 将bmp图片转为jpg等其他任意格式的图片
2009/06/21 PHP
php强制用户转向www域名的方法
2015/06/19 PHP
php之可变变量的实例详解
2017/09/12 PHP
JavaScript 解析Json字符串的性能比较分析代码
2009/12/16 Javascript
关于递归运算的顺序测试代码
2011/11/30 Javascript
前端开发过程中浏览器版本的两种判定方法
2013/10/30 Javascript
javascript数组快速打乱重排的方法
2014/01/02 Javascript
JS兼容浏览器的导出Excel(CSV)文件的方法
2014/05/03 Javascript
JavaScript学习笔记整理_用于模式匹配的String方法
2016/09/19 Javascript
html中鼠标滚轮事件onmousewheel的处理方法
2016/11/11 Javascript
详解VUE2.X过滤器的使用方法
2018/01/11 Javascript
使用 electron 实现类似新版 QQ 的登录界面效果(阴影、背景动画、窗体3D翻转)
2018/10/23 Javascript
es6数据变更同步到视图层的方法
2019/03/04 Javascript
[01:36:17]DOTA2-DPC中国联赛 正赛 Ehome vs iG BO3 第一场 1月31日
2021/03/11 DOTA
python机器人行走步数问题的解决
2018/01/29 Python
PyQt5实现类似别踩白块游戏
2019/01/24 Python
使用Python 统计高频字数的方法
2019/01/31 Python
pytorch: Parameter 的数据结构实例
2019/12/31 Python
pytorch下使用LSTM神经网络写诗实例
2020/01/14 Python
Django ORM实现按天获取数据去重求和例子
2020/05/18 Python
Python如何用wx模块创建文本编辑器
2020/06/07 Python
alice McCALL官网:澳大利亚时尚品牌
2020/11/16 全球购物
金山毒霸系列的笔试题
2013/04/13 面试题
以太网Ethernet IEEE802.3
2013/08/05 面试题
学期自我鉴定
2013/11/04 职场文书
园林技术个人的自我评价
2014/01/08 职场文书
党员组织关系介绍信
2014/02/13 职场文书
会走路的树教学反思
2014/02/20 职场文书
2014年迎新年联欢会活动策划方案
2014/02/26 职场文书
2014年父亲节活动方案
2014/03/06 职场文书
碧霞祠导游词
2015/02/09 职场文书
医务人员医德医风心得体会
2016/01/25 职场文书
智慧人生:永远不需要向任何人解释你自己
2019/08/20 职场文书
利用python实时刷新基金估值(摸鱼小工具)
2021/09/15 Python