vue 键盘快捷键标注

这篇具有很好参考价值的文章主要介绍了vue 键盘快捷键标注。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

vue 键盘快捷键标注,javascript,css,前端

<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博客文章来源地址https://www.toymoban.com/news/detail-606247.html

到了这里,关于vue 键盘快捷键标注的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 键盘快捷键

    键盘快捷键通常用于现代操作系统和计算机软件程序中。 学习和使用键盘快捷键可以节省大量时间。 描述 Windows Mac OS 编辑菜单 Alt + E Ctrl + F2 + F 文件菜单 Alt + F Ctrl + F2 + E 查看菜单 Alt + V Ctrl + F2 + V 选取所有文本 Ctrl + A Cmd + A 复制文本 Ctrl + C Cmd + C 查找文本 Ctrl + F Cmd + F 查找

    2024年02月02日
    浏览(54)
  • RKH81 键盘快捷键

    ⌨️ 旋钮功能篇: ⚡ 电量提示篇: FN + ENTER — 查看电池用量情况 🌟 背光控制篇: FN + ↑ — 背光亮度 + FN + ↓ — 背光亮度 - FN + ← — 背光速度 - FN + → — 背光速度 + FN + — 切换背光颜色 FN + | — 支持多种背光效果切换 FN + — — 长按三秒,恢复出厂设置 FN + windo

    2024年02月11日
    浏览(68)
  • 安卓设备蓝牙键盘快捷键

    日期:2023年1月。 安卓设备可以通过蓝牙或有线外接键盘,值得一提的是,安卓平板连接蓝牙键盘和蓝牙鼠标是一个不错的组合。本文以鸿蒙3.0平板进行测试,介绍一些安卓设备常用的快捷键,内容包含鼠标按键、系统快捷键、桌面快捷键、输入法快捷键、其它快捷键、等等

    2024年02月09日
    浏览(53)
  • Python | PyCharm 键盘快捷键

    创建和编辑 Alt  +  Enter 显示意图动作 Ctrl  +  Space 基本代码完成 Ctrl  +  Shift  +  Space 智能代码完成 Ctrl  +  Alt  +  Space 类型名称完成 Ctrl  +  Shift  +  Enter 完整声明 Ctrl  +  P  /  Alt  +  Q 参数信息/上下文信息 Ctrl  +  Shift  +  I 快速定义 Ctrl  +  Q  /  Shift  +  F1 快速

    2024年04月10日
    浏览(53)
  • Modelsim键盘快捷键和鼠标操作

    Modelsim键盘快捷键和鼠标操作 使用Modelsim查看波形,大多数的操作是键盘和鼠标配合,通过熟悉快捷键操作可以帮助提操作效率。 内容来自Modelsim的官方指导手册,在GUI界面中可以这样查询: Help - SE Documentation - InfoHub(HTML Brower Required),如下图所示: 也可以通过安装目录进

    2024年02月16日
    浏览(59)
  • 罗技k380键盘的快捷键

    因为 他家店的客服好拉胯,不知道自家键盘的快捷键,我没使用过这一类的键盘不知道怎么办,只能网上搜罗资料进行记录和方便自己。 主要是 ipad 快捷键,键盘是罗技 k380,其他的系统纯属抄录其他渠道来的。 k380使用说明: 第一次连接时,打开键盘开关,打开 iPad 的 蓝牙

    2024年02月03日
    浏览(54)
  • 自定义键盘快捷键调节电脑音量

    外接的键盘没有Fn。。。也没有调音量的键😅于是想自己弄一个 新建记事本文件打开,粘贴如下内容: 修改文件名后缀为.reg,双击运行会在注册表的HKEY_LOCAL_MACHINESYSTEMCurrentControlSetControlKeyboard Layout路径下新建Scancode Map,重启电脑后即可生效。 以上代码的内容为:F1静音或

    2024年02月09日
    浏览(55)
  • JS设置键盘快捷键、组合键

    键码了解下 [JavaScript键码表]身为一个键盘侠,不搞清楚键码映射表怎么可以???_码表映射脚本_你挚爱的强哥的博客-CSDN博客 keycode 0 =keycode 1 =keycode 2 =keycode 3 =keycode 4 =keycode 5 =keycode 6 =keycode 7 =keycode 8 = BackSpacekeycode 9 = Tabkeycode 10 =keycode 11 =keycode 12 = Clearkeycode 13 = Enterkeycode

    2024年02月03日
    浏览(51)
  • Mac OS键盘常用快捷键

    图形 按键 ⌘ Command 键 ⌃ Control 键 ⌥ Option 键 ⇧ Shift 键 ⇪ Caps Lock fn 功能键 常用快捷键 剪切、拷贝和粘贴 您可以在大多数 app 中使用这些快捷键来剪切、拷贝或粘贴选中的项目。其中包括文本、图片、音乐等等。您甚至可以在 Finder 中拷贝和粘贴文件,来将文件拷贝到新位

    2024年02月14日
    浏览(63)
  • mpv播放器键盘快捷键

    作为个人认为最好用的播放器之一的MPV播放器,其开源,体积小,支持的格式多样等等非常优秀的功能。但其中也有部分麻烦的地方,因为功能太过强大,导致不知道某些功能的快捷键是什么,这就非常需要一个可以查阅的表了。但是官方给的说明太过长了,我还是自己整理

    2024年02月11日
    浏览(58)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包