vue 键盘快捷键标注

<template>
    <div class="box">
        <div :id="id" class="keyboard">
            <ul class="keys one">
                <li class="key-esc">Esc</li>
                <li class="key-f1">F1</li>
                <li class="key-f2">F2</li>
                <li class="key-f3">F3</li>
                <li class="key-f4">F4</li>
                <li class="key-f5">F5</li>
                <li class="key-f6">F6</li>
                <li class="key-f7">F7</li>
                <li class="key-f8">F8</li>
                <li class="key-f9">F9</li>
                <li class="key-f10">F10</li>
                <li class="key-f11">F11</li>
                <li class="key-f12">F12</li>
                <li class="key-del">Del</li>
            </ul>
            <ul class="keys two">
                <!-- 重音号 -->
                <li class="key-backquote">`</li>
                <li class="key-one">1</li>
                <li class="key-two">2</li>
                <li class="key-three">3</li>
                <li class="key-four">4</li>
                <li class="key-five">5</li>
                <li class="key-six">6</li>
                <li class="key-seven">7</li>
                <li class="key-eight">8</li>
                <li class="key-nine">9</li>
                <li class="key-zero">0</li>
                <li class="key-minus">-</li>
                <li class="key-plus">+</li>
                <li class="key-back">Back</li>
            </ul>
            <ul class="keys three">
                <li class="key-tab">Tab</li>
                <li class="key-q">Q</li>
                <li class="key-w">W</li>
                <li class="key-e">E</li>
                <li class="key-r">R</li>
                <li class="key-t">T</li>
                <li class="key-y">Y</li>
                <li class="key-u">U</li>
                <li class="key-i">I</li>
                <li class="key-o">O</li>
                <li class="key-p">P</li>
                <li class="key-openBracket">[</li>
                <li class="key-closeBracket">]</li>
                <li class="key-slash">\</li>
            </ul>
            <ul class="keys four">
                <li class="key-caps">Caps</li>
                <li class="key-a">A</li>
                <li class="key-s">S</li>
                <li class="key-d">D</li>
                <li class="key-f">F</li>
                <li class="key-g">G</li>
                <li class="key-h">H</li>
                <li class="key-j">J</li>
                <li class="key-k">K</li>
                <li class="key-l">L</li>
                <!-- 分号 -->
                <li class="key-semicolon">;</li>
                <!-- 撇号 -->
                <li class="key-apostrophe">'</li>
                <li class="key-enter">Enter</li>
            </ul>
            <ul class="keys five">
                <li class="key-shift">Shift</li>
                <li class="key-z">Z</li>
                <li class="key-x">X</li>
                <li class="key-c">C</li>
                <li class="key-v">V</li>
                <li class="key-b">B</li>
                <li class="key-n">N</li>
                <li class="key-m">M</li>
                <li class="key-comma">,</li>
                <li class="key-period">.</li>
                <li class="key-backslash">/</li>
                <li class="key-shift">Shift</li>
            </ul>
            <ul class="keys six">
                <li class="key-ctrl">Ctrl</li>
                <li class="key-fn">Fn</li>
                <li class="key-win">Win</li>
                <li class="key-alt">Alt</li>
                <li class="key-space">Space</li>
                <li class="key-alt">Alt</li>
                <li class="key-ctrl">Ctrl</li>
                <div class="arrow">
                    <div class="arrow-item key-top"><i class="el-icon-caret-top"> </i></div>
                    <div class="arrow-two">
                        <div class="arrow-item key-left">
                            <i class="el-icon-caret-left"> </i>
                        </div>
                        <div class="arrow-item key-bottom"><i class="el-icon-caret-bottom"> </i></div>
                        <div class="arrow-item key-right">
                            <i class="el-icon-caret-right"></i>
                        </div>
                    </div>
                </div>
            </ul>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        id: {
            type: String,
            default: 'keyboard'
        },
        keys: {
            type: Array,
            default() {
                return [
                    {
                    key: 'top', // 对应按键class 名字
                    text: '上', // 快捷键描述
                    direction: 'top' // 显示未知 默认 top (top,bottom.left,right)
                    },
                {
                    key: 'bottom', // 对应按键class 名字
                    text: '下', // 快捷键描述
                    direction: 'bottom' // 显示未知 默认 top (top,bottom.left,right)
                },
                {
                    key: 'left', // 对应按键class 名字
                    text: '左', // 快捷键描述
                    direction: 'left' // 显示未知 默认 top (top,bottom.left,right)
                },
                {
                    key: 'right', // 对应按键class 名字
                    text: '右', // 快捷键描述
                    direction: 'right' // 显示未知 默认 top (top,bottom.left,right)
                },
                {
                    key: 'a', // 对应按键class 名字
                    text: '攻击', // 快捷键描述
                    direction: 'top' // 显示未知 默认 top (top,bottom.left,right)
                },
                {
                    key: 'd', // 对应按键class 名字
                    text: '跳跃', // 快捷键描述
                    direction: 'top' // 显示未知 默认 top (top,bottom.left,right)
                }
                ];
            }
        }
    },
    data() {
        return {};
    },
    mounted() {
        this.keys.forEach((item) => {
            const dom = document.querySelector(`#${this.id} .key-${item.key}`);
            this.addDescription(dom, item.text, item.direction);
        });
    },
    methods: {
        addDescription(keyDom, text, direction) {
            if (!direction) {
                direction = 'top';
            }
            // 元素添加快捷键标识
            keyDom.classList.add('shortcut-key');
            // 元素添加快捷键描述子元素
            const descriptionDom = document.createElement('div');
            descriptionDom.classList.add('key-description');
            // 用innerHTML方法直接给P标签赋值
            descriptionDom.innerHTML = `<div class="key-description-${direction}">
                    <div class="key-description-content">${text}</div>
                    <div class="key-description-line"></div>
                </div>`;
            keyDom.appendChild(descriptionDom);
        }
    }
};
</script>

<style scoped lang="scss">
$bg: #111d41;
.box {
    padding: 60px 75px;
    background: #111d41;
    border-radius: 15px;
}
.keyboard {
    user-select: none;
    // border: 1px solid #ffffff1a;
    border-radius: 15px;
    padding: 10px;
    box-shadow: 0 0 10px 1px #ffffff2e;

    cursor: pointer;

    .keys {
        display: flex;
        list-style: none;
        margin: 0 0;
    }
    ul {
        padding: 0;
    }
    li {
        // box-shadow: 0 -6px 10px rgb(255, 255, 255), 0 4px 15px rgba(0, 0, 0, 0.3);
        width: 3em;
        /* font-size: 2em; */
        margin: 0.2em;
        background-color: #ffffff1a; //#f2f2f2;
        border-radius: 15px;
        text-align: center;
        line-height: 3em;
        transition: all 0.25s;
        color: #fff;
    }
    li:active {
        box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.15);
        color: rgb(12, 164, 190);
        text-shadow: 0 0 15px #57c1f1;
    }
    .one {
        color: #eb3f33;
    }
    .one li {
        width: 3.12em;
    }
    .two {
        color: #df960e;
    }
    .three {
        color: #2b46df;
    }
    .four {
        color: rgb(57, 194, 75);
    }
    .five {
        color: #8919ca;
    }
    .six {
        color: #e73d09;
    }
    .key-esc {
        width: 3.5em;
    }
    .key-back {
        width: 4.7em;
    }
    .key-tab {
        width: 4.7em;
    }
    .key-caps {
        width: 6.3em;
    }
    .key-enter {
        width: 4.7em;
    }
    .key-shift {
        width: 7.2em;
    }
    .key-ctrl,
    .key-win,
    .key-alt,
    .key-fn,
    .key-menu {
        width: 4em;
    }
    .key-space {
        width: 14em;
    }
    .arrow {
        width: 8em;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-left: 0.2em;
    }
    .arrow-two {
        display: flex;
    }
    .arrow-item {
        // box-shadow: 0 -6px 10px rgb(255, 255, 255), 0 4px 10px rgba(0, 0, 0, 0.3);
        width: 2.5em;
        margin: 0.2em;
        background-color: #ffffff1a;
        border-radius: 5px;
        text-align: center;
        line-height: 1.5em;
        transition: all 0.25s;
        color: #fff;
    }
    .arrow-item:active {
        box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.15);
        color: #57c1f1;
        text-shadow: 0 0 15px #57c1f1;
    }
}

/**快捷键 */
$light-color: #50dcff;
::v-deep .shortcut-key {
    position: relative;
    // 选中的key于颜色突出
    color: $light-color !important;
    background-color: $bg !important;

    .key-description {
        position: absolute;
        width: 100%;
        height: 100%;
        box-shadow: 0 0 6px $light-color inset;
        border: 1px solid $light-color;
        border-radius: 5px;
        top: 0;

        // 快捷键描述内容
        .key-description-content {
            line-height: 1.5;
            font-size: 12px;
            border: 1px solid $light-color;
            padding: 5px;
            border-radius: 5px;
            box-shadow: 0 0 4px $light-color inset;
            min-width: 75px;
            background: $bg;
            color: #fff;
        }
        // 连接线
        .key-description-line {
            width: 0;
            height: 20px;
            border: 1px dashed $light-color;
        }
        // 上
        .key-description-top {
            position: absolute;
            left: 0;
            right: 0;
            margin: 0 auto;
            transform: translate(0, -100%);
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        // 下
        .key-description-bottom {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            margin: 0 auto;
            display: flex;
            flex-direction: column-reverse;
            align-items: center;
            transform: translate(0, 100%);
        }
        // 左
        .key-description-left {
            position: absolute;
            top: 0;
            bottom: 0;
            margin: 0 auto;
            transform: translate(-100%, 0);
            display: flex;
            align-items: center;

            .key-description-line {
                width: 20px;
                height: 0;
            }
        }

        // 右
        .key-description-right {
            position: absolute;
            top: 0;
            bottom: 0;
            right: 0;
            margin: 0 auto;
            transform: translate(100%, 0);
            display: flex;
            flex-direction: row-reverse;
            align-items: center;

            .key-description-line {
                width: 20px;
                height: 0;
            }
        }
    }
}
</style>

参考：用html加css画个新拟态键盘_html 模拟键盘_背着行囊去远方的博客-CSDN博客