gridesign

设想低代码设计器进行页面的布局，即页面由多个图表构成，图表的位置和大小由布局确定。此时使用的是绝对定位布局。 gridesign使用display:flex实现了一个类似于excel的网格。有单元格合并功能，双击事件。 相比于直接拖动组件来说，这样可以避免绝对定位的缩放和精确性问题。

使用方法

• main.js

import 'gridesign/grid-design.css'
import gridesign from 'gridesign'

createApp(App)
.use(gridesign)
.mount('#app')

• test.vue

<script setup>
    import {UseGridModel} from 'griddesign'
    const gridmodel=UseGridModel();
</script>

<template>
    <div style="height:50%;padding: 100px;">
        <Grid v-model="gridmodel"/>
    </div>
</template>

• gridmodel结构类似这样

{
    layout:{
        row:"100px 1fr 1fr",
        col:"1fr 2fr 1fr"
    },
    range:['A1:B1'],
    cell:['A1','A2','A3','B1','B2','B3','C1','C2','C3']
}

• 可使用的props有

属性	说明
back-color	单元格背景颜色
border-color	单元格边框颜色
range-color	选择区域边框颜色
font-size	单元格文字大小

• 可使用的事件有

事件	说明	事件参数
dblclick	双击单元格	单元格名称，例如A1

• 假如需要在这个组件旁边展示一个网格，需要获取可直接用于display:grid中子项目grid-area的名称数组，比如style="grid-area:A1"。可以使用这段代码

import {UseFlatModel} from 'gridesign'
const fm=UseFlatModel(gridmodel);
//例：fm.value=[ "A1", "A2", "A3", "A1", "B2", "B3", "C1", "C2", "C3" ]