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 相关文章推荐
QQ登录简单实现代码
Mar 09 Javascript
原生javascript实现图片轮播效果代码
Sep 03 Javascript
如何判断鼠标是否在DIV的区域内
Nov 13 Javascript
js下拉选择框与输入框联动实现添加选中值到输入框的方法
Aug 17 Javascript
jquery实现的简单二级菜单效果代码
Sep 22 Javascript
JQuery实现网页右侧随动广告特效
Jan 17 Javascript
JavaScript禁止用户多次提交的两种方法
Jul 24 Javascript
不间断循环滚动效果的实例代码(必看篇)
Oct 08 Javascript
微信小程序页面传值实例分析
Apr 19 Javascript
vue集成百度UEditor富文本编辑器使用教程
Sep 21 Javascript
node-red File读取好保存实例讲解
Sep 11 Javascript
vue radio单选框,获取当前项(每一项)的value值操作
Sep 10 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实现显示照片exif信息的方法
2014/07/11 PHP
php禁止直接从浏览器输入地址访问.php文件的方法
2014/11/04 PHP
PHP的RSA加密解密方法以及开发接口使用
2018/02/11 PHP
CheckBox 如何实现全选?
2006/06/23 Javascript
求得div 下 img的src地址的js代码
2007/02/28 Javascript
jquery tools之tooltip
2009/07/25 Javascript
文本框输入时 实现自动提示(像百度、google一样)
2012/04/05 Javascript
JS.GetAllChild(element,deep,condition)使用介绍
2013/09/21 Javascript
Jquery promise实现一张一张加载图片
2015/11/13 Javascript
基于Javascript实现倒计时功能
2016/02/22 Javascript
BootStrapValidator校验方式
2016/12/19 Javascript
修改ligerui 默认确认按钮的方法
2016/12/27 Javascript
JavaScript省市级联下拉菜单实例
2017/02/14 Javascript
基于JavaScript实现拖动滑块效果
2017/02/16 Javascript
详解Vue学习笔记入门篇之组件的内容分发(slot)
2017/07/17 Javascript
解决Vue2.x父组件与子组件之间的双向绑定问题
2018/03/06 Javascript
security.js实现的RSA加密功能示例
2018/06/06 Javascript
微信小程序解除10个请求并发限制
2018/12/18 Javascript
Vue利用Blob下载原生二进制数组文件
2019/09/25 Javascript
使用node.JS中的url模块解析URL信息
2020/02/06 Javascript
微信小程序连接服务器展示MQTT数据信息的实现
2020/07/14 Javascript
python的Crypto模块实现AES加密实例代码
2018/01/22 Python
Python实现的将文件每一列写入列表功能示例【测试可用】
2018/03/19 Python
一篇文章搞懂Python的类与对象名称空间
2018/12/10 Python
Python3.7 读取 mp3 音频文件生成波形图效果
2019/11/05 Python
python判断无向图环是否存在的示例
2019/11/22 Python
使用CSS3 制作一个material-design 风格登录界面实例
2016/12/12 HTML / CSS
HTML5 Canvas玩转酷炫大波浪进度图效果实例(附demo)
2016/12/14 HTML / CSS
乌克兰在线电子产品商店:MTA
2019/11/14 全球购物
Java中有几种方法可以实现一个线程?用什么关键字修饰同步方法?stop()和suspend()方法为何不推荐使用?
2015/08/04 面试题
DataList 能否分页,请问如何实现?
2015/05/03 面试题
网络教育毕业生自我鉴定
2013/10/10 职场文书
计划生育个人总结
2015/03/02 职场文书
致运动员的广播稿
2015/08/19 职场文书
大学生如何逃脱“毕业季创业队即散伙”魔咒?
2019/08/19 职场文书
自定义函数实现单词排序并运用于PostgreSQL(实现代码)
2021/04/22 PostgreSQL