vue实现原理_使用vue实现简单键盘的示例(支持移动端和pc端)

常看到各种app应用中使用自定义的键盘，本例子中使用vue2实现个简单的键盘,支持在移动端和PC端使用

实现效果：

Keyboard.vue

<script>
import clickoutside from "../directives/clickoutside"

export default {
 directives: { clickoutside },
 data() {
 return {
  keyList: [],
  status: 0,//0 小写 1 大写 2 数字 3 符号
  lowercase: [
  ["q", "w", "e", "r", "t", "y", "u", "i", "o", "p"],
  ["a", "s", "d", "f", "g", "h", "j", "k", "l"],
  ["top", "z", "x", "c", "v", "b", "n", "m", "del"],
  ["123", "point", "blank", "symbol", "enter"]
  ],
  uppercase: [
  ["Q", "W", "E", "R", "T", "Y", "U", "I", "O", "P"],
  ["A", "S", "D", "F", "G", "H", "J", "K", "L"],
  ["top", "Z", "X", "C", "V", "B", "N", "M", "del"],
  ["123", "point", "blank", "symbol", "enter"]
  ],
  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 = "" }) {
  if(value.indexOf("tab-num") > -1){
   this.status = 2
   //数字键盘数据
  }else if(value.indexOf("key-delete") > -1){
  this.emitValue("delete")
  }else if(value.indexOf("tab-blank") > -1){
  this.emitValue(" ")
  }else if(value.indexOf("tab-enter") > -1){
  this.emitValue("\n")
  }else if(value.indexOf("tab-point") > -1){
  this.emitValue(".")
  }else if(value.indexOf("tab-symbol") > -1){
  this.status = 3
  }else if(value.indexOf("tab-top") > -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 === "click" && this.equip) return
  let value = event.srcElement.innerText
  value && value !== "符" && value !== "·" && value !== "123"? this.emitValue(value) : this.tabHandle(event.srcElement.classList)
 },

 emitValue(key) {
  this.$emit("keyVal", key)
 },

 closeModal(e) {
  if (e.target !== this.option.sourceDom) {
  // this.showKeyboard = false
  this.$emit("close", false)
  }
 }
 }
}
</script>

KeyInput.vue

<script>
import Keyboard from "../components/Keyboard"
export default {
 components: {
 Keyboard
 },
 data() {
 return {
  option: {
  show: false,
  sourceDom: ""
  },
  inputValue: ""
 }
 },
 props: {},
 created() {},
 methods: {
 getInputValue(val) {
  if(val === "delete"){
  this.inputValue = this.inputValue.slice(0,this.inputValue.length -1)
  }else{
  this.inputValue += val
  }
 },
 onFocus() {
  this.$set(this.option, "show", true)
  this.$set(this.option, "sourceDom", this.$refs["keyboard"])
 },
 //获取光标位置
 getCursorPosition() {
  let doc = this.$refs["keyboard"]
  if (doc.selectionStart) return doc.selectionStart
  return -1
 },
 //设置光标位置 暂未实现
 setCursorPosition(pos) {
  let doc = this.$refs["keyboard"]
  console.log(doc.setSelectionRange)
  doc.focus()
  doc.setSelectionRange(1,3)
 }
 }
}
</script>

使用demo

<script>
import KeyInput from "../components/KeyInput"
export default {
 components: {
 KeyInput
 },
 data() {
 return {
 }
 },
 created() {},
 methods: {
 }
}
</script>

完整代码：https://github.com/dawnyu/vue-keyborad

vue实现原理_使用vue实现简单键盘的示例(支持移动端和pc端)

http://m.bbyears.com/jiaocheng/144733.html

推荐访问: