tailwindcss3+vue编写一个电脑键盘效果代码-html代码-BFW代码库

代码语言：html

代码描述：tailwindcss3+vue编写一个电脑键盘效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue@2.6.1-dev.js"></script>
</head>

<body>
    <div id="app"></div>


<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/tailwindcss.3.0.0.js"></script>


    <script type="module">
    var script = {
  data() {
    return {
		keys: [
			{label: '`', width: '12', row: '1'},
			{label: '1', width: '10', row: '1'},
			{label: '2', width: '10', row: '1'},
			{label: '3', width: '10', row: '1'},
			{label: '4', width: '10', row: '1'},
			{label: '5', width: '10', row: '1'},
			{label: '6', width: '10', row: '1'},
			{label: '7', width: '10', row: '1'},
			{label: '8', width: '10', row: '1'},
			{label: '9', width: '10', row: '1'},
			{label: '0', width: '10', row: '1'},
			{label: '-', width: '10', row: '1'},
			{label: '=', width: 'full', row: '1', flexGrow: true},
			{label: 'delete', width: 'full', row: '1', flexGrow: true},
			{label: 'tab', width: '14', row: '2',},
			{label: 'Q', width: '10', row: '2',},
			{label: 'W', width: '10', row: '2',},
			{label: 'E', width: '10', row: '2',},
			{label: 'R', width: '10', row: '2',},
			{label: 'T', width: '10', row: '2',},
			{label: 'Y', width: '10', row: '2',},
			{label: 'U', width: '10', row: '2',},
			{label: 'I', width: '10', row: '2',},
			{label: 'O', width: '10', row: '2',},
			{label: 'P', width: '10', row: '2',},
			{label: '\[', width: '12', row: '2',},
			{label: '\]', width: '12', row: '2',},
			{label: '|', width: 'full', row: '2', flexGrow: true},
			{label: 'caps', width: '16', row: '3'},
			{label: 'A', width: '10', row: '3'},
			{label: 'S', width: '10', row: '3'},
			{label: 'D', width: '10', row: '3'},
			{label: 'F', width: '10', row: '3'},
			{label: 'G', width: '10', row: '3'},
			{label: 'H', width: '10', row: '3'},
			{label: 'J', width: '10', row: '3'},
			{label: 'K', width: '10', row: '3'},
			{label: 'L', width: '10', row: '3'},
			{label: ';', width: '10', row: '3'},
			{label: '\'', width: '10', row: '3'},
			{label: 'return', width: 'full', row: '3', flexGrow: true},
			{label: 'shift', width: '20', row: '4'},
			{label: 'Z', width: '10', row: '4'},
			{label: 'X', width: '10', row: '4'},
			{label: 'C', width: '10', row: '4'},
			{label: 'V', width: '10', row: '4'},
			{label: 'B', width: '10', row: '4'},
			{label: 'n', width: '10', row: '4'},
			{label: 'M', width: '10', row: '4'},
			{label: ',', width: '10', row: '4'},
			{label: '.', width: '10', row: '4'},
			{label: '/', width: '10', row: '4'},
			{label: 'shift', width: '16', row: '4', flexGrow: true},
			{label: '▲', width: '10', row: '4'},
			{label: '', width: '10', row: '4'},
			{label: 'fn', width: '10', row: '5'},
			{label: 'ctrl', width: '10', row: '5'},
			{label: 'opt', width: '10', row: '5'},
			{label: 'cmd', width: '10', row: '5'},
			{label: '', width: 'full', row: '5', flexGrow: true},
			{label: 'cmd', width: '10', row: '5'},
			{label: 'opt', width: '10', row: '5'},
			{label: '◄', width: '10', row: '5'},
			{label: '▼', width: '10', row: '5'},
			{label: '►', width: '10', row: '5'}
		]
    };
  },
  methods: {
    doSomething() {
      alert('Hello!');
    }
  }
};

function normalizeComponent(template, style, script, scopeId, isFunctionalTemplate, moduleIdentifier /* server only */, shadowMode, createInjector, createInjectorSSR, createInjectorShadow) {
    if (typeof shadowMode !== 'boolean') {
        createInjectorSSR = createInjector;
        createInjector = shadowMode;
        shadowMode = false;
    }
    // Vue.extend constructor export interop.
    const options = typeof script === 'function' ? script.options : script;
    // render functions
    if (template && template.render) {
        options.render = template.render;
        options.staticRenderFns = template.staticRenderFns;
        options._compiled = true;
        // functional template
        if (isFunctionalTemplate) {
            options.functional = true;
        }
    }
    // scopedId
    if (scopeId) {
        options._scopeId = scopeId;
    }
    let hook;
    if (moduleIdentifier) {
        // server build
        hook = function (context) {
            // 2.3 injection
            context =
                context || // cached call
                    (this.$vnode && this.$vnode.ssrContext) || // stateful
                    (this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext); // functional
            // 2.2 with runInNewContext: true
            if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
                context = __VUE_SSR_CONTEXT__;
            }
            // inject component styles
            if (style) {
                style.call(this, createInjectorSSR(context));
            }
            // register component module identifier for async chunk inference
            if (context && context._registeredComponents) {
                context._registeredComponents.add(moduleIdentifier);
            }
        };
        // used by ssr in case component is cached and beforeCreate
        // never gets called
        options._ssrRegister = hook;
    }
    else if (style) {
        hook = shadowMode
            ? function (context) {
                style.call(this, createInjectorShadow(context, this.$root.$options.shadowRoot));
            }
            : function (context) {
                style.call(this, createInjector(context));
            };
    }
    if (hook) {
        if (options.functional) {
            // register for functional component in vue file
            const originalRender = options.render;
            options.render = function renderWithStyleInjection(h, context) {
                hook.call(context);
                return originalRender(h, context);
            };
        }
        else {
            // inject component registration as beforeCreate hook
            const existing = options.beforeCreate;
            options.beforeCreate = existing ? [].concat(existing, hook) : [hook];
        }
    }
    return script;
}

const isOldIE = typeof navigator !== 'undefined' &&
    /msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());
function createInjector(context) {
    return (id, style) => addStyle(id, style);
}
let HEAD;
const styles = {};
function addStyle(id, css) {
    const group = isOldIE ? css.media || 'default' : id;
    const style = styles[group] || (styles[group] = { ids: new Set(), styles: [] });
    if (!style.ids.has(id)) {
 .........完整代码请登录后点击上方下载按钮下载查看