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

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

代码语言：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'.........完整代码请登录后点击上方下载按钮下载查看