vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > Vue使用虚拟键盘

Vue使用虚拟键盘及中英文切换功能

作者:惟愿君安

这篇文章主要给大家介绍了关于Vue使用虚拟键盘及中英文切换的相关资料,有时候在大型触屏设备(如双屏设备)中往往就没有键盘去操作,所以就需要去建立一个虚拟键盘去操作,需要的朋友可以参考下

1.安装依赖

npm install simple-keyboard --save
npm install simple-keyboard-layouts --save

2.虚拟键盘组件

simpleKeyboard.vue

<template>
  <div :class="keyboardClass"></div>
</template>
<script>
import Keyboard from 'simple-keyboard'
import 'simple-keyboard/build/css/index.css'
import layout from 'simple-keyboard-layouts/build/layouts/chinese' // 中文输入法
export default {
  name: 'SimpleKeyboard',
  props: {
    keyboardClass: {
      default: 'simple-keyboard',
      type: String,
    },
    input: {
      default: '',
    },
    maxLength: { default: '' },
  },
  data: () => ({
    keyboard: null,
    displayDefault: {
      '{bksp}': 'backspace',
      '{lock}': 'caps',
      '{enter}': '> enter',
      '{tab}': 'tab',
      '{shift}': 'shift',
      '{change}': '中文',
      '{space}': ' ',
      '{clear}': '清空',
      '{close}': '关闭',
    },
  }),
  mounted() {
    this.keyboard = new Keyboard(this.keyboardClass, {
      onChange: this.onChange,
      onKeyPress: this.onKeyPress,
      layoutCandidates: layout.layoutCandidates,
      layout: {
        // 默认布局
        default: [
          '` 1 2 3 4 5 6 7 8 9 0 - = {bksp}',
          '{tab} q w e r t y u i o p [ ] \\',
          "{lock} a s d f g h j k l ; ' {enter}",
          '{shift} z x c v b n m , . / {clear}',
          '{change} {space} {close}',
        ],
        // shift布局
        shift: [
          '~ ! @ # $ % ^ & * ( ) _ + {bksp}',
          '{tab} Q W E R T Y U I O P { } |',
          '{lock} A S D F G H J K L : " {enter}',
          '{shift} Z X C V B N M < > ? {clear}',
          '{change} {space} {close}',
        ],
      },
      // 按钮展示文字
      display: this.displayDefault,
      // 按钮样式
      buttonTheme: [
        {
          class: 'hg-red close',
          buttons: '{close}',
        },
        {
          class: 'change',
          buttons: '{change}',
        },
      ],
      // 输入限制长度
      maxLength: this.maxLength,
    })
  },
  methods: {
    onChange(input) {
      this.keyboard.setInput(input)
      this.$emit('onChange', input)
    },
    // 点击键盘
    onKeyPress(button, $event) {
      console.log(button)
      // 点击关闭
      if (button === '{close}') {
        // let keyboard = $event.path[3]
        // 子组件调用父组件的关闭按钮方法
        this.$parent.closekeyboard()
        // keyboard.style.visibility = 'hidden'
        return false
      } else if (button === '{change}') {
        // 切换中英文输入法
        if (this.keyboard.options.layoutCandidates !== null) {
          this.$set(this.displayDefault, '{change}', '英文')
          // 切换至英文
          this.keyboard.setOptions({
            layoutCandidates: null,
            display: this.displayDefault,
          })
        } else {
          // 切换至中文
          this.$set(this.displayDefault, '{change}', '中文')
          this.keyboard.setOptions({
            layoutCandidates: layout.layoutCandidates,
            display: this.displayDefault,
          })
        }
      } else if (button === '{clear}') {
        this.keyboard.clearInput()
      } else {
        let value =
          $event.target.offsetParent.parentElement.children[0].children[0].value
        // 输入框有默认值时,覆写
        if (value) {
          this.keyboard.setInput(value)
        }
        this.$emit('onKeyPress', button)
      }
      if (button === '{shift}' || button === '{lock}') this.handleShift()
    },
    // 切换shift/默认布局
    handleShift() {
      let currentLayout = this.keyboard.options.layoutName
      let shiftToggle = currentLayout === 'default' ? 'shift' : 'default'
      this.keyboard.setOptions({
        layoutName: shiftToggle,
      })
    },
  },
  watch: {
    input(input) {
      this.keyboard.setInput(input)
    },
  },
}
</script>
<style lang="less">
@deep: ~'>>>';
.hg-theme-default {
  width: 70%;
  .hg-button {
    &.hg-red {
      background: #db3e5d;
      color: white;
      &.close {
        max-width: 200px;
      }
    }
    &.change {
      max-width: 200px;
    }
  }
}
</style>

3.使用虚拟键盘 

<el-input v-model="toolParameter.latheNumber" @focus="onInputFocus('latheNumber')">
</el-input>
 
<el-input v-model="toolParameter.tid" @focus="onInputFocus('tid')" placeholder="">
</el-input>
 
<div v-show="showKeyboard">
      <SimpleKeyboard ref="SimpleKeyboard" @onChange="onChangeKeyboard" />
</div>
 
import SimpleKeyboard from '../../components/simpleKeyboard.vue'
export default {
  name: 'Home',
   components: {
    SimpleKeyboard,
   },
   data() {
    return {
        showKeyboard: false, //键盘默认隐藏
        changeIpt:'',//选择了哪个输入框
    }
   },
   
   methods:{
    // inpuit获取焦点显示虚拟键盘
    onInputFocus(res) {
      this.showKeyboard = true
      this.changeIpt = res
      // 父组件调用子组件的方法
      this.$refs.SimpleKeyboard.onKeyPress('{clear}')
    },
 // 给输入框赋值
    onChangeKeyboard(input) {
      if (this.changeIpt == 'latheNumber') {
        this.toolParameter.latheNumber = input
      } else if (this.changeIpt == 'tid') {
        this.toolParameter.tid = input
      }
    },
    // 点击关闭隐藏键盘
    closekeyboard() {
      this.showKeyboard = false
    },
   }
}
// 键盘样式
.simple-keyboard {
  position: absolute;
  bottom: 0;
  left: 5%;
  width: 90%;
  color: #000;
  z-index: 999999999;
}

总结

到此这篇关于Vue使用虚拟键盘及中英文切换的文章就介绍到这了,更多相关Vue使用虚拟键盘内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:
阅读全文