any-grid-layout
Version:
This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
168 lines (149 loc) • 5.29 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8"/>
<link rel="icon" type="image/svg+xml" href="/vite.svg"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Vite + Vue</title>
</head>
<body>
<div id="container" style="display: none; width: 100% ">
<div class="item1 grid-layout-1x1 grid-size-1x2" data-w='2' data-h='3'
data-min-w='2' data-max-w='5' data-min-h='2' data-max-h='5'>
<div style=" height: 80%;width: 80%; overflow: scroll">
Item console.log(toItem.x,this.pos.x);
宽高互减问题 NaN
<h4>一列:</h4>
<table border="1">
<tr>
<td>100</td>
</tr>
</table>
<h4>一行三列:</h4>
<table border="1">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
</table>
<h4>两行三列:</h4>
<table border="1">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
</div>
</div>
<div class="item2">a2</div>
<div class="item3">a3</div>
<div class="item4">a4</div>
<div class="item5">a5</div>
<div class="item6">a6</div>
<div class="item7">a7</div>
<div class="item8">a8</div>
<div class="item9">a9</div>
<div class="item10">a10</div>
<div class="item11">a11</div>
</div>
<div id="container1" style="display: none; margin-top: 50px ">
<div class="item2">b2</div>
<div class="item3">b3</div>
<div class="item4">b4</div>
<div class="item5">b5</div>
<div class="item1 grid-layout-1x1 grid-size-1x2" data-w='2' data-h='3'
data-min-w='2' data-max-w='5' data-min-h='2' data-max-h='5'>
<div id="container3" style="display: none; ">
<div class="item1 grid-layout-1x1 grid-size-1x2" data-w='2' data-h='3'
data-min-w='2' data-max-w='5' data-min-h='2' data-max-h='5'>
</div>
<div class="item2">d2</div>
<div class="item3">d3</div>
<div class="item4">d4</div>
<div class="item5">d5</div>
<div class="item6">d6</div>
<div class="item7">d7</div>
<div class="item8">d8</div>
<div class="item9">d9</div>
<div class="item10">d10</div>
</div>
</div>
<div class="item6">b6</div>
<div class="item7">b7</div>
<div class="item8">b8</div>
<div class="item9">b9</div>
<div class="item10">b10</div>
</div>
<div id="container2" style="display: none; margin-top: 50px ">
<div class="item1 grid-layout-1x1 grid-size-1x2" data-w='2' data-h='3'
data-min-w='2' data-max-w='5' data-min-h='2' data-max-h='5'>
</div>
<div class="item2">c2</div>
<div class="item3">c3</div>
<div class="item4">c4</div>
<div class="item5">c5</div>
<div class="item6">c6</div>
<div class="item7">c7</div>
<div class="item8">c8</div>
<div class="item9">c9</div>
<div class="item10">c10</div>
<div class="item11">c11</div>
<div class="item12">c12</div>
<div class="item13">c13</div>
<div class="item14">c14</div>
<div class="item15">c15</div>
<div class="item16">c16</div>
<div class="item17">c17</div>
<div class="item18">c18</div>
<div class="item19">c19</div>
<div class="item20">c20</div>
</div>
<!-- <script type="module" src="/src/main.js"></script>-->
<script type="module" src="/src/units/testGrid.js"></script>
</body>
<script>
</script>
</html>
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
width: 75%;
margin: auto;
}
#app {
margin: auto;
/*height: 1000px;*/
/*width: 90%;*/
/*width: 1200px;*/
/*margin: auto;*/
}
*::-webkit-scrollbar {
/*width: 0;*/
/*height: 0;*/
}
#container , #container1{
/*display: grid;*/
margin: auto;
}
#container > div {
/* background-color: red !important;*/
/*::-webkit-scrollbar //滚动条整体部分*/
/*::-webkit-scrollbar-button //滚动条两端的按钮*/
/*::-webkit-scrollbar-track // 外层轨道*/
/*::-webkit-scrollbar-track-piece //内层轨道，滚动条中间部分（除去）*/
/*::-webkit-scrollbar-thumb //滚动条里面可以拖动的那个*/
/*::-webkit-scrollbar-corner //边角*/
/*::-webkit-resizer ///定义右下角拖动块的样式*/
}
</style>