vue2如何使用simple-keyboard軟鍵盤有中文(拼音)

更新時(shí)間：2025年04月24日 10:03:13 作者：weixin_54820790

這篇文章主要介紹了vue2如何使用simple-keyboard軟鍵盤有中文(拼音),具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

vue2使用simple-keyboard軟鍵盤有中文(拼音)

安裝依賴

npm install simple-keyboard --save 
npm install simple-keyboard-layouts --save //中文字庫(kù)

在components里面創(chuàng)建

主文件也就是index.vue(直接復(fù)制就可以)

<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' // 中文字庫(kù)
export default {
  name: 'SimpleKeyboard',
  props: {
    keyboardClass: {
      default: 'simple-keyboard',
      type: String,
    },
    maxLength: { default: '' },
  },
  data: () => ({
    keyboard: null,
    displayDefault: {
      '{bksp}': 'backspace',
      '{lock}': '切換',
      //   '{enter}': '←┘enter',
      '{enter}': '< enter',
      '{tab}': 'tab',
      '{shift}': 'shift',
      '{change}': '中文',
      '{space}': ' ',
      '{clear}': '清空',
      '{close}': '關(guān)閉'
    }
  }),
  mounted () {
    this.keyboard = new Keyboard(this.keyboardClass, {
      onChange: this.onChange,
      onKeyPress: this.onKeyPress,
      layoutCandidates: layout.layoutCandidates,
      layout: {
        // 默認(rèn)布局
        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}',
        },
      ],
      // 輸入限制長(zhǎng)度
      maxLength: this.maxLength,
    })
  },
  methods: {
    onChange (input) {
      this.$emit('onChange', input) // 輸入值向外傳遞
    },
    // 重寫清空按鈕
    onChangeKey () {
      this.keyboard.setInput('')
      this.$emit('empty')
    },
    // @focus 觸發(fā)時(shí)賦值 封裝組件調(diào)用
    onChangeFocus (value) {
      this.keyboard.setInput(value)

    },
    // 點(diǎn)擊鍵盤
    onKeyPress (button, $event) {
      // 點(diǎn)擊關(guān)閉
      if (button === '{close}') {
        // 子組件調(diào)用父組件的關(guān)閉按鈕方法
        this.$parent.closekeyboard()
        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.onChangeKey()
      }
      else {
        let value =
          $event.target.offsetParent.parentElement.children[0].children[0].value
        // 輸入框有默認(rèn)值時(shí)，覆寫
        if (value) {
          this.keyboard.setInput(value)
        }
        this.$emit('onKeyPress', button)
      }
      if (button === '{shift}' || button === '{lock}') this.handleShift()
    },
    // 切換shift/默認(rèn)布局
    handleShift () {
      let currentLayout = this.keyboard.options.layoutName
      let shiftToggle = currentLayout === 'default' ? 'shift' : 'default'
      this.keyboard.setOptions({
        layoutName: shiftToggle,
      })
    },
  },
}
</script>
<style lang="scss">
//這塊樣式可以根據(jù)自己的需求調(diào)整
// @deep: ~">>>";
// 這塊樣式可以根據(jù)自己的需求調(diào)整
// .hg-candidate-box {
//   position: fixed;
//   width: 100%;
//   font-size: 42px;
//   background: rgba(256, 256, 256);
//   z-index: 9999;

//   .hg-candidate-box-list {
//     .hg-candidate-box-list-item {
//       padding: 0 20px;
//     }
//   }
// }

.hg-rows {
  //   width: 100% !important;

  .hg-row {
    align-items: center;
    //     height: 50px;

    //     .hg-button {
    //       height: 50px;
    //       font-size: 24px;
    //     }
  }
}

// .hg-theme-default {
//   width: 1080px;
//   height: 330px;
//   left: 0;
//   position: fixed;
//   bottom: 10px;

//   .hg-button {
//     &.hg-red {
//       background: #db3e5d;
//       color: white;

//       &.close {
//         max-width: 200px;
//       }
//     }

//     &.change {
//       max-width: 200px;
//     }
//   }
// }
.simple-keyboard {
  position: fixed;
  width: 100%;
  //   font-size: 42px;
  left: 18%;
  bottom: 0;
  //   transform: translateX(-50%);
  background: rgba(256, 256, 256);
  z-index: 9999;
  max-width: 1000px;
  //   padding: 15px;
  //   margin: 0 auto;
  //   margin-top: 380px;
  box-shadow: 0 4px 0 #b2b2b2, 0 7px 16px rgba(0, 0, 0, 0.6);
  .hg-candidate-box {
    left: 0;
    top: 0;
    position: relative;
    font-size: 30px;
    margin-top: 0;
    transform: translateY(0);
    max-width: 100%;
  }
}

.hg-theme-default .hg-button {
  height: 50px;
  margin: 8px 10px;
  font-size: 23px;
  background-color: #fff;
  border-radius: 8px;
  cursor: pointer;
  -webkit-box-shadow: 0 4px 0 #b2b2b2, 0 5px 10px rgba(0, 0, 0, 0.7);
  box-shadow: 0 3px 0 #b2b2b2, 0 4px 6px rgba(0, 0, 0, 0.7);
}

.hg-theme-default .hg-button.hg-standardBtn:active {
  box-shadow: 0 4px 0 #717070, 0 5px 3px rgba(0, 0, 0, 0.9);
  background-color: #efefef;
}

.simple-keyboard.hg-layout-default .hg-button.bksp {
  height: 50px;
  margin: 8px 10px;
  font-size: 23px;
  background-color: #fff;
  border-radius: 8px;
  cursor: pointer;
  -webkit-box-shadow: 0 4px 0 #b2b2b2, 0 5px 10px rgba(0, 0, 0, 0.7);
  box-shadow: 0 3px 0 #b2b2b2, 0 4px 6px rgba(0, 0, 0, 0.7);
  background: #a8001e;
  color: white;
}

.simple-keyboard.hg-layout-default .hg-button.bksp:active {
  box-shadow: 0 4px 0 #717070, 0 5px 3px rgba(0, 0, 0, 0.9);
  background-color: #efefef;
  color: #000000;
}

.simple-keyboard.hg-layout-default .hg-button.enter {
  height: 50px;
  margin: 8px 10px;
  font-size: 23px;
  background-color: #fff;
  border-radius: 8px;
  cursor: pointer;
  -webkit-box-shadow: 0 4px 0 #b2b2b2, 0 5px 10px rgba(0, 0, 0, 0.7);
  box-shadow: 0 3px 0 #b2b2b2, 0 4px 6px rgba(0, 0, 0, 0.7);
  background: #a8001e;
  color: white;
}

.simple-keyboard.hg-layout-default .hg-button.enter:active {
  box-shadow: 0 4px 0 #717070, 0 5px 3px rgba(0, 0, 0, 0.9);
  background-color: #efefef;
  color: #000000;
}
</style>

再封裝成一個(gè)便捷組件

<template>
  <div>
    <div v-show="showKeyboard">
      <SimpleKeyboard
        ref="refSimpleKeyboard"
        class="Keyboard"
        @onChange="onChangeKeyboard"
        @empty="empty"
      />
    </div>
  </div>
</template>
<script>
import SimpleKeyboard from './index'
export default {
  name: 'Keyboard',
  components: {
    SimpleKeyboard
  },
  data () {
    return {
      showKeyboard: false, // 鍵盤默認(rèn)隱藏
      value: '',
      key: ''
    }
  },
  watch: {
    key (val) {
      this.key = val
      if (this.showKeyboard) {
        this.showKeyboard = false
        setTimeout(() => {
          this.showKeyboard = true
        }, 100)
      }
    },
  },
  methods: {
    // inpuit獲取焦點(diǎn)顯示虛擬鍵盤
    onInputFocus (res) {
      this.showKeyboard = true
    },
    // 給輸入框賦值
    onChangeKeyboard (input) {
      this.$emit('input', { value: input, key: this.key });
    },
    // 隱藏鍵盤 父組件調(diào)用
    closeInputFocus () {
      this.showKeyboard = false
    },
    // 隱藏鍵盤 子組件調(diào)用
    closekeyboard () {
      this.showKeyboard = false
    },
    // 清空輸入框
    empty () {
      this.$emit('input', { value: '', key: this.key });
    },
    // 給虛擬鍵盤賦當(dāng)前輸入框的值
    setKeyboardInput (input) {
      this.$refs.refSimpleKeyboard.onChangeFocus(input)
    }
  }
}
</script>
<style lang="scss" scoped>
// 鍵盤樣式
.Keyboard {
  position: absolute;
}
</style>

在main.js里面全局引入就不用每次都引入了

import Keyboard from '@/components/SimpleKeyboard/Keyboard.vue'
Vue.component("Keyboard", Keyboard);

使用的話就是直接是

@focus="focusEvent('labelCode', labelCode)"

第一個(gè)值是軟鍵盤點(diǎn)擊事件綁定輸入框的key 第二個(gè)是將輸入框原有的值傳進(jìn)去給組件

返回的是一個(gè)對(duì)象{value:'',key:''}

 <el-input
         ref="barCodeInput"
          prefix-icon="el-icon-search"
          placeholder="請(qǐng)掃碼或者輸入條碼"
          v-model="labelCode"
          @keyup.enter.native="addEvent"
          @focus="focusEvent('labelCode', labelCode)"
          clearable
        >

        </el-input>


    <!-- 軟鍵盤 -->
    <Keyboard ref="Keyboard" @input="updateInputValue"></Keyboard>

主要是兩個(gè)事件

第一個(gè)輸入框獲取焦點(diǎn)事件打開軟鍵盤

 // 軟鍵盤抬起事件
    focusEvent (event, value) {
      // 當(dāng)前input獲取焦點(diǎn)時(shí)，顯示鍵盤
      this.$refs.Keyboard.showKeyboard = true
      // 傳入綁定值（字符串）
      this.$refs.Keyboard.key = event
      //傳入當(dāng)前值
      this.$refs.Keyboard.setKeyboardInput(value)
    },

第二個(gè)是軟鍵盤的點(diǎn)擊鍵盤事件將值返回給輸入框

// 軟鍵盤事件
    updateInputValue (value) {
      console.log(value)
      //根據(jù)key 回寫input值
      let parameter = value.key.split(".")
      console.log(parameter);
      if (parameter.length == 1) {
        this[value.key] = value.value
      } else if (parameter.length == 2) {
        let par0 = parameter[0]
        let par1 = parameter[1]
        this.$set(this[par0], par1, value.value)
      } else if (parameter.length == 3) {
        let par0 = parameter[0]
        let par1 = parameter[1]
        let par2 = parameter[2]
        this.$set(this[par0][par1], par2, value.value)
      }
      this.$forceUpdate()
    }