使用vue实现简单键盘,支持移动端和pc端

常看到各种app应用中使用自定义的键盘,本例子中使用vue2实现个简单的键盘,支持在移动端和PC端使用,欢迎点赞

实现效果:

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

<script>
import clickoutside from '../directives/clickoutside'

export default {
  directives: { clickoutside },
  data() {
    return {
      keyList: [],
      status: 0,//0 小写 1 大写 2 数字 3 符号
      lowercase: [
        ['q', 'w', 'e', 'r', 't', 'y', 'u', 'i', 'o', 'p'],
        ['a', 's', 'd', 'f', 'g', 'h', 'j', 'k', 'l'],
        ['top', 'z', 'x', 'c', 'v', 'b', 'n', 'm', 'del'],
        ['123', 'point', 'blank', 'symbol', 'enter']
      ],
      uppercase: [
        ['Q', 'W', 'E', 'R', 'T', 'Y', 'U', 'I', 'O', 'P'],
        ['A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L'],
        ['top', 'Z', 'X', 'C', 'V', 'B', 'N', 'M', 'del'],
        ['123', 'point', 'blank', 'symbol', 'enter']
      ],
      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){
        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
          this.keyList = this.uppercase
        }else{
          this.status = 0
          this.keyList = this.lowercase
        }
      }else{

      }
    },

    clickKey(event) {
      if(event.type === 'click' && this.equip) return
      let value = event.srcElement.innerText
      value && value !== '符' && value !== '·' && value !== '123'? this.emitValue(value) : this.tabHandle(event.srcElement.classList)
    },

    emitValue(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 {
  width: 100%;
  margin: 0 auto;
  font-size: 18px;
  border-radius: 2px;
  padding-top: 0.5em;
  background-color: #e5e6e8;
  user-select: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 999;
  pointer-events: auto;
  p {
    width: 95%;
    margin: 0 auto;
    height: 45px;
    margin-bottom: 0.5em;
    display: flex;
    display: -webkit-box;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    i {
      display: block;
      margin: 0 1%;
      height: 45px;
      line-height: 45px;
      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: 50px;
      margin: 0 1%;
      color: #827f7f;
      background: #d7d7d8;
    }
    .tab-num {
      font-size: 18px;
      background: #dedede;
      color: #5a5959;
    }
    .tab-point {
      width: 20px;
    }
    .tab-blank {
      width: 80px;
      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: 88%;
    }
  }
}
</style>

KeyInput.vue


<template>
  <div>
    <input type="text" ref="keyboard" v-model="inputValue" @focus="onFocus">
    <Keyboard :option="option" @keyVal="getInputValue" @close="option.show = false"></Keyboard>
  </div>
</template>
<script>
import Keyboard from '../components/Keyboard'
export default {
  components: {
    Keyboard
  },
  data() {
    return {
      option: {
        show: false,
        sourceDom: ''
      },
      inputValue: ''
    }
  },
  props: {},
  created() {},
  methods: {
    getInputValue(val) {
      if(val === 'delete'){
        this.inputValue = this.inputValue.slice(0,this.inputValue.length -1)
      }else{
        this.inputValue += val
      }
    },
    onFocus() {
      this.$set(this.option, 'show', true)
      this.$set(this.option, 'sourceDom', this.$refs['keyboard'])
    },
    //获取光标位置
    getCursorPosition() {
      let doc = this.$refs['keyboard']
      if (doc.selectionStart) return doc.selectionStart
      return -1
    },
    //设置光标位置 暂未实现
    setCursorPosition(pos) {
      let doc = this.$refs['keyboard']
      console.log(doc.setSelectionRange)
      doc.focus()
      doc.setSelectionRange(1,3)
    }
  }
}
</script>
<style lang="less" scoped>

</style>

使用demo


<template>
  <div>
    <key-input class="demo-class"></key-input>
  </div>
</template>
<script>
import KeyInput from '../components/KeyInput'
export default {
  components: {
    KeyInput
  },
  data() {
    return {
    }
  },
  created() {},
  methods: {
  }
}
</script>
<style lang="less">
body{
  background: #efefef;
}
.demo-class{
  input{
    border:1px solid #ccc;
    outline: none;
    height: 30px;
    font-size: 16px;
    letter-spacing: 2px;
    padding: 0 5px;
  }
}
</style>

完整代码:https://github.com/dawnyu/vue...

原文地址:

原文地址:https://www.cnblogs.com/lalalagq/p/9960379.html

时间: 2024-10-06 15:55:17

使用vue实现简单键盘,支持移动端和pc端的相关文章

私有云车牌识别支持app端、pc端、H5端接口调用

关键词 私有云车牌识别技术.服务器端车牌识别技术.云端车牌识别技术.私有化车牌识别技术.服务器端车牌识别.私有化车牌识别.私有云车牌识别. 什么叫私有云车牌识别呢? 私有云车牌识别即服务器端车牌识别,是一款基于服务器平台的车牌OCR识别服务程序,企业可以将该识别服务部署在自有服务器上(云服务器或本地服务器),部署完成后,APP端.PC客户端.web端.微信H5端等均可发送识别请求,通过Web Service接口调用该识别服务,上传车牌图像在服务器端完成识别后,返回标准XML识别结果,整个识别过程

前端:移动端和PC端的区别

在阿里的几次面试中,总是被问到移动端和PC端有什么区别,当时回答的时候主要是回答了在兼容性.网速.适配.页面布局等方面的不同,但是还是很不系统,所以这里做一个总结. 第一: PC考虑的是浏览器的兼容性,而移动端开发考虑的更多的是手机兼容性,因为目前不管是android手机还是ios手机,一般浏览器使用的都是webkit内核,所以说做移动端开发,更多考虑的应该是手机分辨率的适配,和不同操作系统的略微差异化. 第二: 在部分事件的处理上,移动端多出来的事件是触屏事件,而缺少的是hover事件. 另外

C# 移动端与PC端的数据交互

小记:针对目前功能越来越强大的智能手机来说,在PC端支持对手机中的用户数据作同步.备份以及恢复等保护措施的应用已经急需完善.不仅要对数据作保护,而且用户更希望自己的手机跟PC能够一体化,以及和远程服务器的一体化.用户希望在手机端的操作能够转移到PC端,对于PC端大屏幕的电脑来说,完成同样的操作可以大量的节省用户的时间.对于功能强大的手机来说,有近1/2的应用可以在PC端同步.所以对PC端应用的规划要以系统的角度来对待.同时要保证手机端和PC端的主流交互模式应保持一致.个人观点:数据的一体化和管理

JavaScript判断移动端及pc端访问不同的网站

http://www.html-js.com/article/2677 现在很多网站都是分为两个版本,一个pc端的一个移动端的(响应式除外),针对这两个版本,就需要对访问的设备进行判断,如果是pc,就直接访问pc网站,否则就访问移动端网站. 对于这个问题可以通过判断UA来解决,前端js可以判断,后端判断也行,这里我们主要讨论的是如何通过js来处理. 假如我们有一个网站,pc端通过www.test.com访问,而移动端通过m.test.com来访问.我们需要做的就是当移动端访问www.test.c

iis 如何搭建url 重定向,实现无线端和pc端不同的跳转

第一步,下载安装ARR(Application Request Routing), http://www.iis.net/downloads/microsoft/application-request-routing 第二步,简要设置ARR: 安装完成后,IIS里会多出两个图标,分别是Application Request Routing和URL重写.2.0版本(也就是2008或者Win7系统)需要双击ApplicationRequest Routing以后,在右侧Server Proxy Se

html与css的移动端与pc端需要注意的事项

一个移动端与pc端之间最主要的也就是尺寸问题,苹果与安卓的机型尺寸大小相差甚多,一个尺寸都会影响用户的体验.那么我们来了解一下一些常用的解决方法. 一般在网页中都会在头部有一些这样的代码 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"> 1)首先 nam

关于移动端和PC端的交互的区别

对于现在的移动端设备的普及,移动端上的用户体验成了一个重要的关注点. 看了一些网上的关于移动端的交互和用户体验的知识,这里总结了一些.若有不足的地方,希望大家能够积极补充. PC端和移动端的产品的设计区别 屏幕与适配的问题考虑: 操作系统(windows,mac,android,iOS等)的区别: 网络环境(并不是每一个移动端设备随时随地都有网络): 使用场景(站着,坐着,躺着,蹲着,趴着,走着等等): 传感器的使用(摇一摇功能,地图实时导航,语音输入等): 操作方式不同(PC端是点击,移动端是

移动端与PC端的viewport

设备像素,就是我们直觉上觉得"靠谱"的像素,这些像素为所使用的各种设备提供了正规的分辨率,并且其值可以通过(通常情况下)从screen.width/height属性中读出: css像素,就是css自定义的像素,需要注意的是css像素与设备像素不是一回事: 如何获取屏幕的尺寸: 可以通过使用screen.width/height来获取,获取出来的值就是用户屏幕的整体大小: 度量单位:设备像素: 浏览器:IE7&IE8都存在以css像素对其进行度量的问题: 注意:在ios和andr

web移动端和PC端利用chrome同步开发调试

利用chrome可以同步移动端和PC端的web开发调试,前提是,Android系统版本必须4.0+,而且必须用chrome,或者Android 4.4系统版本以上的原生app里面的webview才可以. 由于Android 4.4的原生app webview 的调试暂时还比较少,所以,这里简单说一下chrome下的调试. 1.移动设备和PC设备必须安装了chrome 32以上的版本,移动设备必须为Android4.0+: 2.移动设备进入设置功能,设置为开发模式: 3.PC端chrome打开ch