文章来源:https://www.toymoban.com/news/detail-606247.html
<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模板网!