基于vue的可缩放拖动流式网格布局。
npm i jd-row --save 使用
import JdRow from "jd-row"; const app = createApp(App); app.use(JdRow).mount("#app"); 使用 定义行高和列数，列宽自动
<template>
<jd-row class="home-wrap" :rowSize="9" :rowHeight="60" :rowGap="16" :columnGap="16">
<jd-col :rowSpan="5" :columnSpan="5" drag resize>1</jd-col>
<jd-col :rowSpan="5" :columnSpan="4" drag resize>2</jd-col>
<jd-col :rowSpan="3" :columnSpan="3" drag resize>3</jd-col>
<jd-col :rowSpan="3" :columnSpan="3" drag resize>4</jd-col>
<jd-col :rowSpan="6" :columnSpan="3" drag resize>5</jd-col>
<jd-col :rowSpan="3" :columnSpan="3" drag resize>6</jd-col>
<jd-col :rowSpan="3" :columnSpan="3" drag resize>7</jd-col>
</jd-row>
</template>
预定义前3行的行高和前3列列宽，其余按照rowWidth和rowHeight
<template> <jd-row class="home-wrap" :rowSize="9" :columns="['100px', '1fr', '10rem']" :rows="['80px', '1fr','5rem']" :rowWidth="100" :rowHeight="60"> <jd-col :rowSpan="5" :columnSpan="5" drag resize>1</jd-col> <jd-col :rowSpan="5" :columnSpan="4" drag resize>2</jd-col> <jd-col :rowSpan="3" :columnSpan="3" drag resize>3</jd-col> <jd-col :rowSpan="3" :columnSpan="3" drag resize>4</jd-col> <jd-col :rowSpan="6" :columnSpan="3" drag resize>5</jd-col> <jd-col :rowSpan="3" :columnSpan="3" drag resize>6</jd-col> <jd-col :rowSpan="3" :columnSpan="3" drag resize>7</jd-col> </jd-row> </template> jd-row Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| rowWidth | 单列宽 | Number | — | 1fr |
| rowHeight | 单列高 | Number | — | auto |
| rowSize | 每行列数 | Number | — | 24 |
| rowGap | 行间距 | Number | — | 0 |
| columnGap | 列间距 | Number | — | 0 |
| columns | 预定义的列宽（会覆盖rowWidth） | Array[String] | — | — |
| rows | 预定义的行高（会覆盖rowHeight） | Array[String] | — | — |
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| rowSpan | 跨行数 | Number | — | 1 |
| columnSpan | 跨列数 | Number | — | 1 |
| drag | 是否可拖放 | Boolean | — | false |
| resize | 是否可改变尺寸 | Boolean | — | false |
Demo
版权声明：
1、该文章(资料)来源于互联网公开信息，我方只是对该内容做点评，所分享的下载地址为原作者公开地址。2、网站不提供资料下载，如需下载请到原作者页面进行下载。
