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 相关文章推荐
JS模拟自动点击的简单实例
Aug 08 Javascript
JavaScript获取鼠标移动时的坐标(兼容IE8、chome谷歌、Firefox)
Sep 13 Javascript
IE中getElementsByName()对有些元素无效的解决方案
Sep 28 Javascript
javascript学习笔记之函数定义
Jun 25 Javascript
JQuery通过AJAX从后台获取信息显示在表格上并支持行选中
Sep 15 Javascript
浅谈Javascript数据属性与访问器属性
Jul 26 Javascript
Bootstrap在线电子商务网站实战项目5
Oct 14 Javascript
Angularjs实现搜索关键字高亮显示效果
Jan 17 Javascript
React入门教程之Hello World以及环境搭建详解
Jul 11 Javascript
利用JS实现scroll自定义滚动效果详解
Oct 17 Javascript
微信小程序签到功能
Oct 31 Javascript
JavaScript遍历DOM元素的常见方式示例
Feb 16 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判断网页是否gzip压缩
2013/06/25 PHP
自己写了一个php检测文件编码的函数
2014/04/21 PHP
php实现自定义中奖项数和概率的抽奖函数示例
2017/05/26 PHP
php日志函数error_log用法实例分析
2019/09/23 PHP
PHP优化之批量操作MySQL实例分析
2020/04/23 PHP
js汉字排序问题 支持中英文混排,兼容各浏览器,包括CHROME
2011/12/20 Javascript
javascript上传图片前预览图片兼容大多数浏览器
2013/10/25 Javascript
自己写的Javascript计算时间差函数
2013/10/28 Javascript
js使用eval解析json实例与注意事项分享
2014/01/18 Javascript
setTimeout内不支持jquery的选择器的解决方案
2015/04/28 Javascript
[js高手之路]设计模式系列课程-发布者,订阅者重构购物车的实例
2017/08/29 Javascript
为nuxt项目写一个面包屑cli工具实现自动生成页面与面包屑配置
2019/09/29 Javascript
js实现二级联动简单实例
2020/01/11 Javascript
sharp.js安装过程中遇到的问题总结
2020/04/02 Javascript
微信小程序实现自定义底部导航
2020/11/18 Javascript
python实现在目录中查找指定文件的方法
2014/11/11 Python
Python的SQLalchemy模块连接与操作MySQL的基础示例
2016/07/11 Python
python删除某个字符
2018/03/19 Python
Windows系统下PhantomJS的安装和基本用法
2018/10/21 Python
python requests 库请求带有文件参数的接口实例
2019/01/03 Python
Python OpenCV中的resize()函数的使用
2019/06/20 Python
在Python3 numpy中mean和average的区别详解
2019/08/24 Python
Django restframework 框架认证、权限、限流用法示例
2019/12/21 Python
经济实惠的豪华背包和行李袋:Packs Project
2018/10/17 全球购物
美国一家著名的手表在线折扣网站:Discount Watch Store
2020/02/24 全球购物
幼儿教师思想汇报
2014/01/10 职场文书
《春雨》教学反思
2014/04/24 职场文书
常务副县长“三严三实”对照检查材料思想汇报
2014/10/05 职场文书
考试没考好检讨书(精选篇)
2014/11/16 职场文书
公司感谢信范文
2015/01/22 职场文书
《灰雀》教学反思
2016/02/19 职场文书
2019入党申请书格式
2019/06/25 职场文书
python周期任务调度工具Schedule使用详解
2021/11/23 Python
攻击最高的10只幽灵系神奇宝贝,坚盾剑怪排第一,第五最为可怕
2022/03/18 日漫
P站美图推荐——变身女主角特辑
2022/03/20 日漫
Python+SeaTable实现计算两个日期间的工作日天数
2022/07/07 Python