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