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

注册引入的主键

定义的method

总结

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

(0)

相关推荐

  • vue.js中引入vuex储存接口数据及调用的详细流程

    前言 前几天在慕课网上看到黄轶老师的高仿饿了么app视频教程,在做接口设计的时候,我在想,这个接口能不能储存下来全局调用呢?而不是走很多次接口,管理起来也麻烦. 万能的vue果然有这个功能,那就是vuex. Vuex 是一个主要应用在中大型单页应用的类似于 Flux 的数据管理架构.它主要帮我们更好地组织代码,以及把应用内的的状态保持在可维护.可理解的状态. 如果你不太理解 Vue.js 应用里的状态是什么意思的话,你可以想象一下你此前写的 Vue 组件里面的 data 字段.Vuex 把状态分

  • VueJS如何引入css或者less文件的一些坑

    我们在做Vue+webpack的时,难免会引入各种公共css样式文件,那么我们改如何引入呢?引入时会有那些坑呢? 首先,引入公共样式时,我们在"main.js"里使用AMD的方式引入,即 require('./assets/css/main.less'); 这时,我们会抛出一个错误,是因为我们没有写解析的依赖,webpack不知道怎么解析 这时,我们要填写上依赖, require('!style!css!less!./assets/css/main.less'); 在很多以前的博客里都

  • Vue项目中引入外部文件的方法(css、js、less)

    这两天学习了Vue.js ,正好了解了如何引入外部文件的方法,而且很重要,所以,今天添加一点小笔记. 例子中css文件采用bootstrap.css,js文件采用jQuery,less文件用less.less(自定义文件) 步骤一:安装webpack cnpm install webpack -g 步骤二:在src/assets下面新建css.js.less.fonts文件夹,并放入对应文件. 将bootstrap.css放入css目录下,bootstrap.min.js放入js文件下,font

  • Vue如何引入远程JS文件

    问题 最近在使用 Vue 做东西,用到钉钉扫描登录的功能,这里需要引入远程的 js 文件,因为 Vue 的方式跟之前的不太一样,又不想把文件下载到本地应用,找了一下解决的方法,貌似都需要引入第三方的库,最后找到了解决方案,分享之. 思路 一开始的思路是在 Vue 加载完 Dom 之后(mounted),使用 JavaScript 脚本在 body 中插入远程的脚本文件. 后来发现了 Vue 的 createElement 方法,简单的封装一个组件解决问题. 解决方法 第一版代码(直接在操作 Do

  • Vue框架中正确引入JS库的方法介绍

    本文主要给大家介绍的是关于在Vue框架中正确引入JS库的相关内容,分享出来供大家参考学习,下面话不多说,来一起看看详细的介绍: 错误示范 全局变量法 最不靠谱的方式就是将导入的库挂在全部变量window 对象下: // entry.js: window._ = require('lodash'); // MyComponent.vue: export default { created() { console.log(_.isEmpty() ? 'Lodash everywhere!' : 'U

  • 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=&q

  • VUE项目中引入JS文件的方法总结

    目录 1.在index.html页面使用script标签引入 2.在main.js中使用window.moduleName 使用 3.手动添加export 4. 使用import方式,把需要的js库中的方法挂载到全局 补充:Vue3如何引用全局JS文件 总结 在开发Vue项目的时候,有时需要使用一些非ES6格式的没有export的js库,可以有如下方法实现: 1.在index.html页面使用script标签引入 当然也可以使用cdn的地址.这样引入后的内容是全局的,可以在所有地方使用. <!D

  • vue引入iconfont图标库的优雅实战记录

    目录 前言 生成SVG svg sprites简介 获取项目图标 项目设置 图标引用 组件引用 多主题支持 配置多主题样式 Icon改造 页面校验 尾言 前言 本文撰写的初衷是为了向组内成员推行使用svg sprites的方式管理项目的图标,由于实际工作中很多项目仍然采用font class的方式,这样不自觉带来一个痛点. 当项目一期开发完毕后,过段时间进入到项目二期.新增的开发需求不可避免的会增加新的图标,而font class需要全量打包图标的字体文件. 哪怕新需求只添加了一个图标,而前端同

  • Vue 引入AMap高德地图的实现代码

    本文代码仅针对 Vue CLI 3.x 生成的项目有效,但是在第二步配置的时候,可以直接配置 webpack.externals,所以本引入思路是通用的,并不局限于该项目 资源 AMap 准备-入门教程 引入 AMap 在 public/index.html 文件 </body> 前引入 <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.14&key=您申请的

  • VUE引入第三方js包及调用方法讲解

    VUE引入第三方js包及调用方法 1.首先是第三方js包存放的位置 一定要放在 static 目录下否则引用不到 2.网上查找到的引用第三方包的四种方式 实测部分第三方js包没法使用,较稳定的方式是在 index.html 中引入js包 <script src="static/xxxxx.js"></script> 3.mounted 是初始化加载的方法 可以理解为jquery 中的页面加载完的初始化方法 如果第三方包有初始化需要调用的一些函数等 需要写在mou

  • vue自定义js图片碎片轮播图切换效果的实现代码

    定义一个banner.js文件,代码如下 ;window.requestAnimationFrame = window.requestAnimationFrame||function(a){return setTimeout(a,1000/60)}; window.cancelAnimationFrame = window.cancelAnimationFrame||clearTimeout; var FragmentBanner = function(option) { //实例化时,可传的参

  • vue.js element-ui validate中代码不执行问题解决方法

    先说结论 在自定义验证里面每一个判断都要有callback(),就是要保证callback()一定会执行到 因为要验证数字,参考了官网参考代码如下,发现有如下图bug,当输入为以数字开头包含字符串的内容时,验证不会报错,因为业务逻辑也不相符,随改写代码 <el-form-item label="年龄" prop="age"> <el-input v-model.number="ruleForm2.age"></el-

  • vue.js 微信支付前端代码分享

    实例如下所示: onBridgeReady: function () { const openId = localStorage.getItem('openId') payService.payment(this.$route.params.orderId, 1, openId).then(rt => { //1:支付类型,可不填 this.message = rt.t WeixinJSBridge.invoke( 'getBrandWCPayRequest', { 'appId': this.

  • vue引入静态js文件的方法

    由于一些演示,需要对编码名称等可快速进行修改,需要页面方便配置.由于build后的vue项目基本已经看不出原样,因此需要创建一个文件,并在打包的时候不会进行编译. vue-cli 2.0的作法是在static文件下创建js.vue-cli 3.0 的写法则是直接在public文件夹下创建js. 具体操作如下: 1.在public文件夹下创建config.js文件,里面文件的语法是es5,不允许使用浏览器不能兼容的es6语法.因为该文件不进行编译,es6部分语法浏览器不兼容. 2..在html文件

随机推荐