vue 实现中英文虚拟键盘

Question

因项目需要，需要一个可以切换中英文的虚拟键盘，网上找了没找到对应的插件或者组件，特来请教各位大神

Answer 1

中文键盘？中文那叫输入法吧。搜狗百度都有 js 版本的。

Answer 2

不能像移动端一样弹出软键盘是啥意思? 莫不是你系统禁用了软键盘？

Answer 3

可以参考下这个
https://gitee.com/zhyihui/Vir...

这个时jquey插件 集成到vue里难度应该不大吧

直接在$nextTick 里调用应该也可以

Answer 4

我用react和sass写了一个简单的键盘布局，你应该看得懂，自己改成vue的语法吧哈哈哈哈。
切换键盘你用v-if就可以了，点击按钮你一个个手动绑定吧，
Shift、Ctrl的按下状态你自己做一个吧，也不复杂，不过我的符号大多数都扯平了，shift按钮意义不是很大了。

import React from 'react'
import style from './KeyBoard.module.scss'

export function KeyBoard() {
    return (
        <div className={style.keyboard}>
            <div className={style.row}>
                <div className={style.btn}>~</div>
                <div className={style.btn}>!</div>
                <div className={style.btn}>@</div>
                <div className={style.btn}>#</div>
                <div className={style.btn}>$</div>
                <div className={style.btn}>%</div>
                <div className={style.btn}>^</div>
                <div className={style.btn}>{`&`}</div>
                <div className={style.btn}>*</div>
                <div className={style.btn}>(</div>
                <div className={style.btn}>)</div>
                <div className={style.btn}>=</div>
                <div className={`${style.btn} ${style.Auto}`}>___</div>
                <div className={`${style.btn} ${style.StatusChange}`}>切换成中文键盘</div>
            </div>
            <div className={style.row}>
                <div className={style.btn}>`</div>
                <div className={style.btn}>1</div>
                <div className={style.btn}>2</div>
                <div className={style.btn}>3</div>
                <div className={style.btn}>4</div>
                <div className={style.btn}>5</div>
                <div className={style.btn}>6</div>
                <div className={style.btn}>7</div>
                <div className={style.btn}>8</div>
                <div className={style.btn}>9</div>
                <div className={style.btn}>0</div>
                <div className={style.btn}>+</div>
                <div className={style.btn}>-</div>

                <div className={`${style.btn} ${style.Backspace}`}>Backspace</div>
            </div>
            <div className={style.row}>
                <div className={`${style.btn} ${style.Tab}`}>Tab</div>
                <div className={style.btn}>Q</div>
                <div className={style.btn}>W</div>
                <div className={style.btn}>E</div>
                <div className={style.btn}>R</div>
                <div className={style.btn}>T</div>
                <div className={style.btn}>Y</div>
                <div className={style.btn}>U</div>
                <div className={style.btn}>I</div>
                <div className={style.btn}>O</div>
                <div className={style.btn}>P</div>
                <div className={style.btn}>[</div>
                <div className={style.btn}>]</div>
                <div className={style.btn}>{`{`}</div>
                <div className={style.btn}>{`}`}</div>

                <div className={`${style.btn} ${style.Auto}`}>\</div>
            </div>
            <div className={style.row}>
                <div className={`${style.btn} ${style.CapsLock}`}>Caps Lock</div>
                <div className={style.btn}>A</div>
                <div className={style.btn}>S</div>
                <div className={style.btn}>D</div>
                <div className={style.btn}>F</div>
                <div className={style.btn}>G</div>
                <div className={style.btn}>H</div>
                <div className={style.btn}>J</div>
                <div className={style.btn}>K</div>
                <div className={style.btn}>L</div>
                <div className={style.btn}>?</div>
                <div className={style.btn}>"</div>
                <div className={style.btn}>'</div>
                <div className={`${style.btn} ${style.Enter}`}>Enter</div>
            </div>

            <div className={style.row}>
                <div className={`${style.btn} ${style.Shift}`}>Shift</div>
                <div className={style.btn}>Z</div>
                <div className={style.btn}>X</div>
                <div className={style.btn}>C</div>
                <div className={style.btn}>V</div>
                <div className={style.btn}>B</div>
                <div className={style.btn}>N</div>
                <div className={style.btn}>M</div>
                <div className={style.btn}>,</div>
                <div className={style.btn}>.</div>
                <div className={style.btn}>{`<`}</div>
                <div className={style.btn}>{`>`}</div>
                <div className={`${style.btn} ${style.Auto}`}>Delete</div>
                <div className={`${style.btn} ${style.Auto}`}>Insert</div>
            </div>

            <div className={style.row}>
                <div className={`${style.btn} ${style.Ctrl}`}>Ctrl</div>
                <div className={style.btn}>alt</div>
                <div className={`${style.btn} ${style.Auto}`}>Space</div>
                <div className={style.btn}>;</div>
                <div className={style.btn}>:</div>
                <div className={style.btn}>|</div>
                <div className={style.btn}>/</div>
            </div>
        </div>
    )
}

.keyboard {
    border: 1px solid #aaa;
    border-bottom: 0;
    border-right: 0;

    width: auto;

    &>.row {
        display: flex;
        flex-direction: row;
        border-bottom: 1px solid #aaa;
        &>.btn {
            border-right: 1px solid #aaa;
            text-align: center;
            padding: 10px;
            height: 20px;
            width: 20px;
            flex-shrink: 0;
        }
        &>.btn:hover {
            background: #bbb;
        }
        &>.Backspace {
            flex: auto;
        }
        &>.Tab {
            width: 80px;
        }
        &>.Auto {
            flex: auto;
        }
        &>.CapsLock {
            width: 100px;
        }
        &>.Shift {
            width: 90px;
        }
        &>.Ctrl {
            width: 70px;
        }
        &>.Enter {
            flex: auto;
        }

        &>.StatusChange {
            width: 140px;
        }
    }

}