vue-自定义pc端键盘-动画

其他 2018-11-19 14:57:58 阅读次数: 0 

<template>

    <div class="keyboard">
     <div class="keyboard_key">
        <div class="keyboard_character" @click="_chraClick">
            <button type="button" class="pad-num1 specialkey" data-num='!'>!</button>
            <button type="button" class="pad-num1 specialkey" data-num='@'>@</button>
            <button type="button" class="pad-num1 specialkey" data-num='#'>#</button>
            <button type="button" class="pad-num1 specialkey" data-num='$'>$</button>
            <button type="button" class="pad-num1 specialkey" data-num='%'>%</button>
            <button type="button" class="pad-num1 specialkey" data-num='^'>^</button>
            <button type="button" class="pad-num1 specialkey" data-num='&'>&</button>
            <button type="button" class="pad-num1 specialkey" data-num='*'>*</button>
            <button type="button" class="pad-num1 specialkey" data-num='('>(</button>
            <button type="button" class="pad-num1 specialkey" data-num=')'>)</button>
            <button type="button" class="pad-num1 specialkey" data-num='{'>{</button>
            <button type="button" class="pad-num1 specialkey" data-num='}'>}</button>
            <button type="button" class="pad-num1 specialkey" data-num=':'>:</button>
            <button type="button" class="pad-num1 specialkey" data-num='"'>"</button>
            <button type="button" class="pad-num1 specialkey" data-num=','>,</button>
            <button type="button" class="pad-num1 specialkey" data-num='/'>/</button>
        </div>
         
       <div class="centerdiv"></div>

        <div class="keyboard_Letter">
         <div class="group1">
            <button v-for="(item,index) in keylist" :key="index" type="button" class="pad-num1" @click="upClick1(item)">{{item}}</button>
         </div>

         <div class="group2">
            <button v-for="(item,index) in keylist2" :key="index" type="button" class="pad-num1" @click="upClick2(item)">{{item}}</button>
         </div>

         <div class="group3">
           <button v-for="(item,index) in keylist3" :key="index" type="button" class="pad-num1" @click="upClick3(item)" >{{item}}</button>
         </div> 
         <div class="group4" @click="_letterClick">
            <button type="button" class="pad-num1 specialkey" data-num='delete'>delete</button>
            <button type="button" class="pad-num2 specialkey" data-num='space'>space</button>
            <button type="button" class="pad-num1 specialkey" data-num='enter'>
              <i class="fa fa-mail-reply" data-num='enter'></i>
              </button>
         </div>
       
        </div>

      <div class="centerdiv"></div>

        <div class="keyboard_number" @click="_handleKeyPress">
          <div class="pos-right-pad-num">
            <button type="button" class="pad-num specialkey" data-num='7'>7</button>
            <button type="button" class="pad-num specialkey" data-num='8'>8</button>
            <button type="button" class="pad-num specialkey" data-num='9'>9</button>
            <button type="button" class="pad-num specialkey" data-num='4'>4</button>
            <button type="button" class="pad-num specialkey" data-num='5'>5</button>
            <button type="button" class="pad-num specialkey" data-num='6'>6</button>
            <button type="button" class="pad-num specialkey" data-num='1'>1</button>
            <button type="button" class="pad-num specialkey" data-num='2'>2</button>
            <button type="button" class="pad-num specialkey" data-num='3'>3</button>
            <button type="button" class="pad-num specialkey" data-num='0'>0</button>
            <button type="button" class="pad-num specialkey" data-num='.'>.</button>
            <button type="button" class="pad-num specialkey" data-num='D'>X</button>
          </div>
          <div class="pos-right-pad-act">
            <button type="button" class="pad-num specialkey border-right" style="width:100%" data-num='+'>+</button>
            <button type="button" class="pad-num specialkey border-right" style="width:100%" data-num='-'>-<br></button>
            <button type="button" class="pad-num2 specialkey border-right" data-num='enter'><i class="fa fa-mail-reply" aria-hidden="true"></i></button>
          </div>
        </div>
     </div>
    </div>
</template>

<script>
export default {
  data() {
    return {
      keyValue: "",
      keylist: [],
      keylist2: [],
      keylist3: [],
      bigkeys1:[],
      bigkeys2:[],
      bigkeys3:[],
      smallkeys1:[],
      smallkeys2:[],
      smallkeys3:[],
      selected:false,
    };
  },
  created() {
    this.readle();
  },
  methods: {
    readle() {
      let smallkey1 = ["q", "w", "e", "r", "t", "y", "u", "i", "o", "p"];
      let bigkey1 = ["Q", "W", "E", "R", "T", "Y", "U", "I", "O", "P"];
      let smallkey2 = ["a", "s", "d", "f", "g", "h", "j", "k", "l"];
      let bigkey2 = ["A", "S", "D", "F", "G", "H", "J", "K", "L"];
      let smallkey3 = ["shift","z", "x", "c", "v", "b", "n", "m", "<", ">"];
      let bigkey3 = ["SHIFT", "Z", "X", "C", "V", "B", "N", "M", "<", ">"];
      this.keylist = smallkey1;
      this.keylist2 = smallkey2;
      this.keylist3 = smallkey3;
      this.bigkeys1=bigkey1;
      this.bigkeys2=bigkey2;
      this.bigkeys3=bigkey3;
      this.smallkeys1=smallkey1;
      this.smallkeys2=smallkey2;
      this.smallkeys3=smallkey3;
    },
    _chraClick(e) {
      let num = e.target.dataset.num;
      this.keyValue += num;
      this.$emit("updatekey",this.keyValue);
    },
    _handleKeyPress(e) {
      let num = e.target.dataset.num;
      switch (String(num)) {
        case "D":
          this.deletekey();
          break;
        case "enter":
          this.keyValue+="\n";
          break;
        default:
          this.Addnum(num);
          break;
      }
      this.$emit("updatekey",this.keyValue)
    },
    deletekey() {
      let values = this.keyValue;
      if (!values.length) {
        return false;
      } else {
        this.keyValue = values.substring(0, values.length - 1);
          this.$emit("updatekey",this.keyValue)
      }
    },
    Addnum(num) {
      let value = this.keyValue;
      this.keyValue = value + num;
    },
    upClick1(key){
      this.keyValue+=key;
        this.$emit("updatekey",this.keyValue)
    },
    upClick2(key){
      this.keyValue+=key;
        this.$emit("updatekey",this.keyValue)
    },
    upClick3(key){
      switch(String(key))
      {
        case "shift":
        this.keylist=this.bigkeys1;
        this.keylist2=this.bigkeys2;
        this.keylist3=this.bigkeys3;
        break;
        case "SHIFT":
       this.keylist = this.smallkeys1;
       this.keylist2 = this.smallkeys2;
       this.keylist3 = this.smallkeys3;
       break;
       default:
       this.keyValue+=key;
       break;
      }
        this.$emit("updatekey",this.keyValue)
    },
    _letterClick(e){
        let num = e.target.dataset.num;
        switch(String(num))
        {
          case "delete":
          this.deletekey();
          break;
          case "space":
          this.keyValue +=" ";
          break;
          case "enter":
          this.keyValue +="\n";
          break;
        }
    },
  }
};
</script>
<style lang="less" scoped>
.keyboard {
  width: 100%;
  height: 215px;
  background: #000;
  opacity: 0.7;
  overflow: hidden;

}

.keyboard_key {
  padding-top: 10px;
  width: 95%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
button {
  background-color: aliceblue;
}
// ----数字键盘-----
.keyboard_number {
  display: flex;
  width: 20%;
  margin: 0;
  padding: 0;
  vertical-align: bottom;
  flex-direction: row;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: center;
}
.pos-right-pad-num {
  display: flex;
  width: 75%;
  flex-direction: row;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: center;
}
.pos-right-pad-act {
  width: 25%;
}
.pad-num {
  margin: 0 !important;
  width: 33.3333333%;
  height: 48px;
  border: 0;
  border: 1px solid #000000;
  font-size: 15px;
  cursor: pointer;
  &:hover {
    position: relative;
    cursor: pointer;
  }
  &:active {
    top: 1px;
    left: 1px;
    background-color: #201a1a;
  }
}
.pad-num2 {
  margin: 0 !important;
  width: 100%;
  height: 96px;
  border: 0;
  border: 1px solid #000000;
  font-size: 15px;
  cursor: pointer;
  &:hover {
    position: relative;
    cursor: pointer;
  }
  &:active {
    top: 1px;
    left: 1px;
    background-color: #201a1a;
  }
}

// 字符键盘
.keyboard_character {
  width: 20%;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: center;
  margin-left: 5%;
  .pad-num1 {
    width: 25%;
    height: 48px;
    border: 1px solid #000000;
    font-size: 15px;
    cursor: pointer;
    &:hover {
      position: relative;
      cursor: pointer;
    }
    &:active {
      top: 1px;
      left: 1px;
      background-color: #201a1a;
    }
  }
}

//字母键盘
.keyboard_Letter {
  width: 40%;
  margin: 0;
  padding: 0;
  .group1 {
    display: flex;
    flex-direction: row;
    .pad-num1 {
      width: 10%;
      height: 48px;
      border: 1px solid #000000;
      font-size: 15px;
      cursor: pointer;
      &:hover {
        position: relative;
        cursor: pointer;
      }
      &:active {
        top: 1px;
        left: 1px;
        background-color: #201a1a;
      }
    }
  }
  .group2 {
    display: flex;
    flex-direction: row;
    width: 100%;
    margin-left: 26px;
    .pad-num1 {
      width: 10%;
      height: 48px;
      border: 1px solid #000000;
      font-size: 15px;
      cursor: pointer;
      &:hover {
        position: relative;
        cursor: pointer;
      }
      &:active {
        top: 1px;
        left: 1px;
        background-color: #201a1a;
      }
    }
  }

  .group3 {
    display: flex;
    flex-direction: row;
    .pad-num1 {
      width: 10%;
      height: 48px;
      border: 1px solid #000000;
      font-size: 14px;
      cursor: pointer;
      &:hover {
        position: relative;
        cursor: pointer;
      }
      &:active {
        top: 1px;
        left: 1px;
        background-color: #201a1a;
      }
    }
  }
  .group4 {
    display: flex;
    flex-direction: row;
    .pad-num1 {
      width: 15%;
      height: 48px;
      font-size: 14px;
      cursor: pointer;
      &:hover {
        position: relative;
        cursor: pointer;
      }
      &:active {
        top: 1px;
        left: 1px;
        background-color: #201a1a;
      }
    }
    .pad-num2 {
      width: 70%;
      height: 48px;
      border: 1px solid #000000;
      font-size: 14px;
      cursor: pointer;
      &:hover {
        position: relative;
        cursor: pointer;
      }
      &:active {
        top: 1px;
        left: 1px;
        background-color: #201a1a;
      }
    }
  }
}
.centerdiv {
  border-right: 2px solid rgb(243, 239, 239);
  padding-bottom: 1800px; /*关键*/
  margin-bottom: -1800px; /*关键*/
  padding-top: 1800px; /*关键*/
  margin-top: -1800px; /*关键*/
}
.input-box {
  font-size: 35px;
  font-weight: bold;
  height: 40px;
  border-bottom: 1px solid #aaa;
  padding: 10px 15px;
  text-align: right;
  width: 90%;
}
</style>
<template>
    <div>
        <el-button @click="handShow" type="primary">键盘</el-button>
        <textarea type="text" v-model="keyboards"></textarea>
        <transition name="fade">
        <keyboard refs="key" v-show="ifshow" class="key"  v-on:updatekey="GetKeyVal"></keyboard>
        </transition>
    </div>
</template>

<script>
import Keyboard from "./keyBoard";

export default {
  data() {
    return {
      keyboards: "",
      ifshow: false
    };
  },
  components: {
    Keyboard
  },
  methods: {
    GetKeyVal(val) {
      this.keyboards = val;
    },
    handShow() {
      this.ifshow = !this.ifshow;
    }
  }
};
</script>

<style lang="less" scoped>
#app {
  width: 680px;
  margin: 20px auto;
  font-family: Verdana, Sans-Serif;

  h1 {
    color: #42b983;
    font-weight: bold;
  }

  textarea {
    display: block;
    width: 100%;
    min-height: 100px;
    padding: 0;
    margin: 20px 0;
    font-size: 16px;
  }
  .key {
    position: fixed;
    left: 0px;
    bottom: 0px;
    width: 100%;
    z-index: 999;
  }
  .fade-enter-active,
  .fade-leave-active {
    transition: all 0.3s ease;
  }
  .fade-enter,
  .fade-leave-to {
    transform: translateY(220px);
    opacity: 0;
  }
}
</style>

猜你喜欢

转载自www.cnblogs.com/huanhuan55/p/9983003.html
今日推荐
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
周排行
让自己的头脑极度开放
CentOS 6.5(x64) 和Redhat6.5操作系误删libc
高可用注册中心
【日记】12.28/【题解】AtCoder AGC041
XML（5）_XML 约束_DTD
Java集合Map（四）
树梅派安装桌面环境教程
pipenv 的 使用和安装
小程序白屏问题和内存研究
C语言简单选择排序
每日归档
更多
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022