Verwenden Sie Vue, um einfache Tastaturoperationen zu implementieren

In diesem Artikel wird hauptsächlich das Beispiel der Verwendung von Vue zur Implementierung einer einfachen Tastatur vorgestellt (unterstützt Mobilgeräte und PCs). Jetzt teile ich es mit Ihnen und gebe es als Referenz.

Wir sehen häufig benutzerdefinierte Tastaturen, die in verschiedenen Apps verwendet werden. In diesem Beispiel wird vue2 verwendet, um eine einfache Tastatur zu implementieren, die auf Mobilgeräten und PCs verwendet werden kann:

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>

Demo verwenden

<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>

Das Obige habe ich für alle zusammengestellt Ich hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

So verwenden Sie js und jQuery, um die angegebene Zuweisungsmethode zu implementieren

So verwenden Sie Vue, um einen Interceptor zu implementieren für Token-Verarbeitungsmethoden Welche?

Wie optimiert man die Verpackung mit React und Webpack?

Wie schreibe ich eine todolist-Komponente mit Vue?

Wie erreicht man Punktdiffusion mit openlayers4?

Eslint-Konfiguration im Webpack verwenden (ausführliches Tutorial)

Das obige ist der detaillierte Inhalt vonVerwenden Sie Vue, um einfache Tastaturoperationen zu implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!