admin管理员组

文章数量:1587993

继上篇数字键盘以后，这篇文章写一下键盘用法，同猿们拿好小本本!

1.封装的键盘组件

<template>
  <div >
      <div  :style="{top:topPx,right:rightPx}">
        <input  name="inputArea"  style="z-index: 99999999999"  :placeholder="placeholder" v-model="value"/>
        <input type="button" :style="{backgroundColor:'#'+BGColor}" @click="searchAseetesProd"/>
      </div>
       <div   style='display: none;'>
          <p ></p>
          <hr>
        <div >
            <div >
                <i  ></i>
                <i ></i>
            </div>
            <div >
               <div>
                <span class = "span" v-for="(item,index) in chinese" :key="index">{
  {item}}</span>
               </div>
            </div>
        </div>
        <div >
            <div  data-k><div>~</div><div>`</div></div>
            <div  data-k><div>!</div><div>1</div></div>
            <div  data-k><div>@</div><div>2</div></div>
            <div  data-k><div>#</div><div>3</div></div>
            <div  data-k><div>$</div><div>4</div></div>
            <div  data-k><div>%</div><div>5</div></div>
            <div  data-k><div>^</div><div>6</div></div>
            <div  data-k><div>&amp;</div><div>7</div></div>
            <div  data-k><div>*</div><div>8</div></div>
            <div  data-k><div>(</div><div>9</div></div>
            <div  data-k><div>)</div><div>0</div></div>
            <div  data-k><div>_</div><div>-</div></div>
            <div  data-k><div>+</div><div>=</div></div>
            <div  data-k>Backspace</div>
        </div>
        <div >
            <div  data-k>Tab</div>
            <div  data-k>Q</div>
            <div  data-k>W</div>
            <div  data-k>E</div>
            <div  data-k>R</div>
            <div  data-k>T</div>
            <div  data-k>Y</div>
            <div  data-k>U</div>
            <div  data-k>I</div>
            <div  data-k>O</div>
            <div  data-k>P</div>
            <div  data-k><div>{</div><div>[</div></div>
            <div  data-k><div>}</div><div>]</div></div>
            <div  data-k><div>|</div><div>\</div></div>
        </div>
        <div >
            <div  data-k>CapsLock</div>
            <div  data-k>A</div>
            <div  data-k>S</div>
            <div  data-k>D</div>
            <div  data-k>F</div>
            <div  data-k>G</div>
            <div  data-k>H</div>
            <div  data-k>J</div>
            <div  data-k>K</div>
            <div  data-k>L</div>
            <div  data-k><div>:</div><div>;</div></div>
            <div  data-k><div>"</div><div>'</div></div>
            <div  data-k>Enter</div>
        </div>
        <div >
            <div  data-k>Shift</div>
            <div  data-k>Z</div>
            <div  data-k>X</div>
            <div  data-k>C</div>
            <div  data-k>V</div>
            <div  data-k>B</div>
            <div  data-k>N</div>
            <div  data-k>M</div>
            <div  data-k><div></div><div>,</div></div>
            <div  data-k><div>></div><div>.</div></div>
            <div  data-k><div>?</div><div>/</div></div>
            <div  data-ki

本文标签： 键盘功能vue

版权声明：本文标题：vue功能-键盘 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://www.elefans.com/dongtai/1728024141a1142522.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。