dream2023/f-render

可以封装 <el-row> 实现行容器的组件吗

Closed this issue · 2 comments

Zhwt commented

你好! 是否可以考虑实现 <el-row> 行容器这个东西, 或者是把<el-row> 也单独封装成一个组件, 比如现在需要布一个这个样子的局, 就是一行和另一行不对齐的情况:

+--------+-------+
| 输入框  |       |
+--------+       |
| 输入框  | 图片框 |
+--------+       |
| 输入框  |       |
+--------+-------+

假设这里的输入框和图片框的宽度都是 12, 现在使用 #10 中给出的解决方法, 使用 layout 控制宽度的话会变成这样:

+--------+-------+
| 输入框  |       |
+--------+       |
         | 图片框 |
         |       |
         |       |
+--------+-------+
| 输入框  | 输入框 |
+--------+-------+

如果用行容器这种模式的话可以变成是一行, 左右各有一个宽 12 的行容器, 左边的行容器里有 3 个输入框, 每个宽度都是 24, 右边的是一个图片框, 这样的话正好两边就是一样高的, 最后生成的代码应该类似这样:

<row>
    <row span="12">
        <input />
        <input />
        <input />
    </row>
    
    <row span="12">
        <image/>
    </row>
</row>

第二个图那个错位的布局使用的 formDesc:

{
  key_1587437729999: {
    label: "单行输入框",
    type: "input",
    layout: 12
  },
  key_1587437739302: {
    label: "上传图片",
    type: "image-uploader",
    attrs: {
      fileType: [],
      action: "https:\u002F\u002Fwww.mocky.io\u002Fv2\u002F5cc8019d300000980a055e76"
    },
    layout: 12
  },
  key_1587437746662: {
    label: "单行输入框",
    type: "input",
    layout: 12
  },
  key_1587437760580: {
    label: "单行输入框",
    type: "input",
    layout: 12
  }
}

正在进行重构,会考虑的

鉴于架构原因,这个项目不做实现,会在另外一个组件中实现