vue功能-键盘

最新推荐文章于 2024-08-01 13:53:02 发布

你眼中的柔情

最新推荐文章于 2024-08-01 13:53:02 发布

阅读量4.1k

点赞数 1

分类专栏： vue 文章标签： vue键盘

本文链接：https://blog.csdn.net/return_js/article/details/94639886

版权

本文介绍了如何在Vue.js中封装并使用键盘组件，包括一个JS文件和一个搜索按钮图片。文章提到了音转字的功能，但未详细展开。最后提醒读者如果发现代码可以优化，可以自行调整。

摘要由CSDN通过智能技术生成

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

1.封装的键盘组件

<template>
  <div class="vitualKeyboard">
      <div class="search" :style="{top:topPx,right:rightPx}">
        <input  name="inputArea" id="inputArea" style="z-index: 99999999999"  :placeholder="placeholder" v-model="value"/>
        <input type="button" :style="{backgroundColor:'#'+BGColor}" @click="searchAseetesProd"/>
      </div>
       <div class="keyboardBox" id="keyboard" style='display: none;'>
          <p class="showInput"></p>
          <hr>
        <div class="chinesePrompt">
            <div class="arrow">
                <i class="up" ></i>
                <i class="down"></i>
            </div>
            <div class="chinesePrompt-box">
               <div>
                <span class = "span" v-for="(item,index) in chinese" :key="index">{
  {item}}</span>
               </div>
            </div>
        </div>
        <div class="line gap_t">
            <div class="keys_d t-a-l" data-kid="192"><div>~</div><div>`</div></div>
            <div class="keys_d t-a-l" data-kid="49"><div>!</div><div>1</div></div>
            <div class="keys_d t-a-l" data-kid="50"><div>@</div><div>2</div></div>
            <div class="keys_d t-a-l" data-kid="51"><div>#</div><div>3</div></div>
            <div class="keys_d t-a-l" data-kid="52"><div>$</div><div>4</div></div>
            <div class="keys_d t-a-l" data-kid="53"><div>%</div><div>5</div></div>
            <div class="keys_d t-a-l" data-kid="54"><div>^</div><div>6</div></div>
            <div class="keys_d t-a-l" data-kid="55"><div>&amp;</div><div>7</div></div>
            <div class="keys_d t-a-l" data-kid="56"><div>*</div><div>8</div></div>
            <div class="keys_d t-a-l" data-kid="57"><div>(</div><div>9</div></div>
            <div class="keys_d t-a-l" data-kid="48"><div>)</div><div>0</div></div>
            <div class="keys_d t-a-l" data-kid="189"><div>_</div><div>-</div></div>
            <div class="keys_d t-a-l" data-kid="187"><div>+</div><div>=</div></div>
            <div class="keysCmd k-w-80 l-h-40 f-s-14" data-kid="8">Backspace</div>
        </div>
        <div class="line">
            <div class="keysCmd k-w-50" data-kid="9">Tab</div>
            <div class="keys" data-kid="81">Q</div>
            <div class="keys" data-kid="87">W</div>
            <div class="keys" data-kid="69">E</div>
            <div class="keys" data-kid="82">R</div>
            <div class="keys" data-kid="84">T</div>
            <div class="keys" data-kid="89">Y</div>
            <div class="keys" data-kid="85">U</div>
            <div class="keys" data-kid="73">I</div>
            <div class="keys" data-kid="79">O</div>
            <div class="keys" data-kid="80">P</div>
            <div class="keys_d t-a-l" data-kid="219"><div>{</div><div>[</div></div>
            <div class="keys_d t-a-l" data-kid="221"><div>}</div><div>]</div></div>
            <div class="keys_d k-w-75 t-a-l" data-kid="220"><div>|</div><div>\</div></div>
        </div>
        <div class="line">
            <div class="keysCmd k-w-70 f-s-14" data-kid="20">CapsLock</div>
            <div class="keys" data-kid="65">A</div>
            <div class="keys" data-kid="83">S</div>
            <div class="keys" data-kid="68">D</div>
            <div class="keys" data-kid="70">F</div>
            <div class="keys" data-kid="71">G</div>
            <div class="keys" data-kid="72">H</div>
            <div class="keys" data-kid="74">J</div>
            <div class="keys" data-kid="75">K</div>
            <div class="keys" data-kid="76">L</div>
            <div class="keys_d t-a-l" data-kid="186"><div>:</div><div>;</div></div>
            <div class="keys_d t-a-l" data-kid="222"><div>"</div><div>'</div></div>
            <div class="keysCmd key_enter" data-kid="13">Enter</div>
        </div>
        <div class="line">
            <div class="keysCmd k-w-100" data-kid="16">Shift</div>
            <div class="keys" data-kid="90">Z</div>
            <div class="keys" data-kid="88">X</div>
            <div class="keys" data-kid="67">C</div>
            <div class="keys" data-kid="86">V</div>
            <div class="keys" data-kid="66">B</div>
            <div class="keys" data-kid="78">N</div>
            <div class="keys" data-kid="77">M</div>
            <div class="keys_d t-a-l" data-kid="188"><div></div><div>,</div></div>
            <div class="keys_d t-a-l" data-kid="190"><div>></div><div>.</div></div>
            <div class="keys_d t-a-l" data-kid="191"><div>?</div><div>/</div></div>
            <div class="keysCmd k-w-120" data-ki