vue虚拟键盘demo

知识点： 数组方法，事件委派，css过渡
数组方法： pop(),从末尾出栈
css过渡:

事件捕获：

效果预览：

首先开始布局：

// 还是更建议使用JSON对象
const arr = reactive([1, 2, 3, 4, 5, 6, 7, 8, 9, 0, '*'])
const valArr = reactive([]) // 输入框的值

 <div class="ipt">
    <div class="box" v-for="v in 6" :key="v">
      {{ valArr[v-1] }}
      <!--这就是那个小黑点-->
      <div class="mask" :style="!valArr[v - 1] ? { opacity: 0 , width: '40px', height: '40px'} : {}"></div>
    </div>
  </div>
  <div class="keyBorder" @click="handleBtn($event)">
    <div class="item" v-for="v in arr" :key="v" :id="v.toString()">{{  v }}</div>
  </div>

然后就是绑定事件的函数了，其实很简单

const handleBtn = (e: Event) => {
// 事件只给父组件绑定事件，然后捕获出发的按钮
if (valArr.length < 6 && e.target.id && e.target.id !== '*') valArr.push(e.target.id)
if (e.target.id === '*') valArr.pop()
// 将valArr抛出去
}