지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 웹 프론트엔드 > JS 튜토리얼 > vue를 사용하여 간단한 키보드 작업 구현

vue를 사용하여 간단한 키보드 작업 구현

亚连
풀어 주다： 2018-06-15 15:01:02
원래의
2513명이 탐색했습니다.

이 글에서는 vue를 사용하여 간단한 키보드를 구현한 사례를 주로 소개합니다(모바일, PC 지원). 이제 공유해 드리며 참고용으로 올려드립니다.

다양한 앱에서 사용되는 맞춤형 키보드를 자주 볼 수 있습니다. 이 예에서는 모바일과 PC에서 사용할 수 있는 간단한 키보드를 구현하는 데 vue2가 사용됩니다.

효과 달성:

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

<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>
로그인 후 복사

위 내용은 제가 모든 사람을 위해 편집한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

관련 기사:

js와 jQuery를 사용하여 지정된 할당 방법을 구현하는 방법

Vue를 사용하여 인터셉터를 구현하는 방법과 토큰 처리 방법은 무엇입니까?

React 및 Webpack을 사용하여 패키징을 최적화하는 방법은 무엇입니까?

vue를 사용하여 todolist 구성 요소를 작성하는 방법은 무엇입니까?

openlayers4를 사용하여 점 확산을 달성하는 방법은 무엇입니까?

webpack에서 eslint 구성 사용(자세한 튜토리얼)

위 내용은 vue를 사용하여 간단한 키보드 작업 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨：
vue 건반
원천：php.cn
이전 기사：Anglejs 캐시를 작동하는 방법 다음 기사：JS의 연산자 i++ 및 ++i에 대한 자세한 분석
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
JS: 부모 속성을 기반으로 개체를 만드는 방법 모든 URL을 포함하는 JS 개체를 만들려고 합니다. 나는 이것을 data() 부분을 통해 달성하고 싶습니다: importdefaultdefineComponent...
에서 2024-04-04 21:08:50
0
1
1411
URL의 www를 와일드카드 하위 도메인으로 바꿉니다. www.domain.com/new-mexico/albuquerque/businessname-513526.html을 businessname.domain.com/ne...
에서 2024-04-04 19:28:30
0
1
344
두 개의 별도 테이블에서 판매 데이터를 요약할 때 MySQL 문제 귀하의 지원에 미리 감사드립니다. 저는 SQL을 배우고 사용할 데이터를 생성하고 있지만 한 가지 간단한 문제에 봉착했습니다. 아래 스크린샷의 테이블은 지역 및 날...
에서 2024-04-04 14:22:13
0
2
343
첫 번째 열의 전체 높이에 걸쳐 하나의 항목이 포함된 3개의 열로 구성된 그리드 레이아웃을 구현합니다. CSS에서 1개의 열 콘텐츠를 오프셋하고 싶습니다. 다음을 수행하는 것만 큼 간단하다고 생각합니다. 이제 이는 상단을 오프셋하지만 두 번째 열이 첫 번째 열의 높...
에서 2024-04-02 09:05:41
0
1
301
입력한 숫자를 늘리는 방법은 무엇입니까? HTMLinput 요소를 사용할 때 step 속성을 구현하려고 합니다. 이렇게 하면 입력 필드에서 위쪽/아래쪽 화살표를 클릭하여 현재 값에 100을 추가할 수 있...
에서 2024-04-01 19:13:50
0
2
267
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿