Use vue to implement simple keyboard operations

This article mainly introduces the example of using vue to implement a simple keyboard (supports mobile and PC). Now I share it with you and give you a reference.

It is common to see custom keyboards used in various app applications. In this example, vue2 is used to implement a simple keyboard, which can be used on mobile and PC terminals.

Achieve the effect:

Keyboard.vue

<template>
 <p class="keyboard" v-show="showKeyboard" v-clickoutside="closeModal">
 <p v-for="keys in keyList">
  <template v-for="key in keys">
  <i v-if="key === &#39;top&#39;" @click.stop="clickKey" @touchend.stop="clickKey" class="iconfont icon-zhiding tab-top"></i>
  <i v-else-if="key === &#39;123&#39;" @click.stop="clickKey" @touchend.stop="clickKey" class="tab-num">123</i>
  <i v-else-if="key === &#39;del&#39;" @click.stop="clickKey" @touchend.stop="clickKey" class="iconfont icon-delete key-delete"></i>
  <i v-else-if="key === &#39;blank&#39;" @click.stop="clickKey" @touchend.stop="clickKey" class="iconfont icon-konggejian-jianpanyong tab-blank"></i>
  <i v-else-if="key === &#39;symbol&#39;" @click.stop="clickKey" @touchend.stop="clickKey" class="tab-symbol">符</i>
  <i v-else-if="key === &#39;point&#39;" @click.stop="clickKey" @touchend.stop="clickKey" class="tab-point">·</i>
  <i v-else-if="key === &#39;enter&#39;" @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>
 </p>
</template>
<script>
import clickoutside from &#39;../directives/clickoutside&#39;
export default {
 directives: { clickoutside },
 data() {
 return {
  keyList: [],
  status: 0,//0 小写 1 大写 2 数字 3 符号
  lowercase: [
  [&#39;q&#39;, &#39;w&#39;, &#39;e&#39;, &#39;r&#39;, &#39;t&#39;, &#39;y&#39;, &#39;u&#39;, &#39;i&#39;, &#39;o&#39;, &#39;p&#39;],
  [&#39;a&#39;, &#39;s&#39;, &#39;d&#39;, &#39;f&#39;, &#39;g&#39;, &#39;h&#39;, &#39;j&#39;, &#39;k&#39;, &#39;l&#39;],
  [&#39;top&#39;, &#39;z&#39;, &#39;x&#39;, &#39;c&#39;, &#39;v&#39;, &#39;b&#39;, &#39;n&#39;, &#39;m&#39;, &#39;del&#39;],
  [&#39;123&#39;, &#39;point&#39;, &#39;blank&#39;, &#39;symbol&#39;, &#39;enter&#39;]
  ],
  uppercase: [
  [&#39;Q&#39;, &#39;W&#39;, &#39;E&#39;, &#39;R&#39;, &#39;T&#39;, &#39;Y&#39;, &#39;U&#39;, &#39;I&#39;, &#39;O&#39;, &#39;P&#39;],
  [&#39;A&#39;, &#39;S&#39;, &#39;D&#39;, &#39;F&#39;, &#39;G&#39;, &#39;H&#39;, &#39;J&#39;, &#39;K&#39;, &#39;L&#39;],
  [&#39;top&#39;, &#39;Z&#39;, &#39;X&#39;, &#39;C&#39;, &#39;V&#39;, &#39;B&#39;, &#39;N&#39;, &#39;M&#39;, &#39;del&#39;],
  [&#39;123&#39;, &#39;point&#39;, &#39;blank&#39;, &#39;symbol&#39;, &#39;enter&#39;]
  ],
  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 = &#39;&#39; }) {
  if(value.indexOf(&#39;tab-num&#39;) > -1){
   this.status = 2
   //数字键盘数据
  }else if(value.indexOf(&#39;key-delete&#39;) > -1){
  this.emitValue(&#39;delete&#39;)
  }else if(value.indexOf(&#39;tab-blank&#39;) > -1){
  this.emitValue(&#39; &#39;)
  }else if(value.indexOf(&#39;tab-enter&#39;) > -1){
  this.emitValue(&#39;\n&#39;)
  }else if(value.indexOf(&#39;tab-point&#39;) > -1){
  this.emitValue(&#39;.&#39;)
  }else if(value.indexOf(&#39;tab-symbol&#39;) > -1){
  this.status = 3
  }else if(value.indexOf(&#39;tab-top&#39;) > -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 === &#39;click&#39; && this.equip) return
  let value = event.srcElement.innerText
  value && value !== &#39;符&#39; && value !== &#39;·&#39; && value !== &#39;123&#39;? this.emitValue(value) : this.tabHandle(event.srcElement.classList)
 },
 emitValue(key) {
  this.$emit(&#39;keyVal&#39;, key)
 },
 closeModal(e) {
  if (e.target !== this.option.sourceDom) {
  // this.showKeyboard = false
  this.$emit(&#39;close&#39;, 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>
 <p>
 <input type="text" ref="keyboard" v-model="inputValue" @focus="onFocus">
 <Keyboard :option="option" @keyVal="getInputValue" @close="option.show = false"></Keyboard>
 </p>
</template>
<script>
import Keyboard from &#39;../components/Keyboard&#39;
export default {
 components: {
 Keyboard
 },
 data() {
 return {
  option: {
  show: false,
  sourceDom: &#39;&#39;
  },
  inputValue: &#39;&#39;
 }
 },
 props: {},
 created() {},
 methods: {
 getInputValue(val) {
  if(val === &#39;delete&#39;){
  this.inputValue = this.inputValue.slice(0,this.inputValue.length -1)
  }else{
  this.inputValue += val
  }
 },
 onFocus() {
  this.$set(this.option, &#39;show&#39;, true)
  this.$set(this.option, &#39;sourceDom&#39;, this.$refs[&#39;keyboard&#39;])
 },
 //获取光标位置
 getCursorPosition() {
  let doc = this.$refs[&#39;keyboard&#39;]
  if (doc.selectionStart) return doc.selectionStart
  return -1
 },
 //设置光标位置 暂未实现
 setCursorPosition(pos) {
  let doc = this.$refs[&#39;keyboard&#39;]
  console.log(doc.setSelectionRange)
  doc.focus()
  doc.setSelectionRange(1,3)
 }
 }
}
</script>
<style lang="less" scoped>
</style>

Use demo

<template>
 <p>
 <key-input class="demo-class"></key-input>
 </p>
</template>
<script>
import KeyInput from &#39;../components/KeyInput&#39;
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>

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

How to use js and jQuery to implement the specified assignment method

How to use Vue to implement interceptors for token processing methods Which ones?

How to optimize packaging using React and Webpack?

How to write the todolist component using vue?

How to achieve point diffusion using openlayers4?

Using eslint configuration in webpack (detailed tutorial)

The above is the detailed content of Use vue to implement simple keyboard operations. For more information, please follow other related articles on the PHP Chinese website!