低代码可视化系统设计器：_data 与_class 属性用法详解

利用可视化设计器构建你的应用系统

• _data 属性
• _class 属性

_data 属性

我们在为组件做数据绑定的时候使用 _data，如 el-table 组件绑定数据的属性就是默认为这个字段，因此我们的一些自定义组件或者其他的数据绑定都统一定为 _data。

一般类似于列表或者是通过 v-for 这种形式渲染的组件，都可以为其指定一个数组，然后循环遍历进行渲染。

我们通过几个常用组件的示例，来介绍一下关于 _data 属性，也就是数据属性的使用方法。

在页面设计器中，只要具有 data 属性的组件，都有两种方式进行数据的指定，一种是通过绑定接口的返回值来填充数据，另一种是手动指定数据。

1. 表格组件 lc-table

假设现在要做一个歌单的列表。

先拖入一个表格组件，然后给它设置几个列。

有歌曲名称、歌手、时长、热度这四列，目前还是一个空列表，没有歌单的数据，这四列的值分别绑定到 title、singer、time、hot 字段上面。

新建一个请求链接，并在当前页面中添加这个请求链接，该请求链接返回的数据被绑定在 songList 字段上面。

点击表格属性面板的填充数据选项，列出了当前可以绑定的数据字段。

请求链接返回的数据格式如下：

{
  "data": [
    {"title": "研文真习性", "singer": "宋伟", "time": "05:32", "hot": 190},
    {"title": "非是象", "singer": "蔡军", "time": "04:26", "hot": 844},
    {"title": "近铁民家装还", "singer": "易洋", "time": "04:36", "hot": 783}
  ]
}

其中 data 字段的值就会绑定到 songList 上面，我们选中这个数据字段，列表就会自动渲染出来。

2. 虚拟列表组件 lc-list

在页面设计器中拖入一个列表组件，然后在列表组件中再放入一个卡片组件。

这次我们通过手动指定数据的方式来对列表进行数据绑定，数据格式如下：

[
  {
    "name": "苹果",
    "description": "苹果，学名 Malus pumila Mill.，别称西洋苹果、柰，属于蔷薇科苹果属的植物。"
  },
  {
    "name": "香蕉",
    "description": "香蕉（Musa acuminata），英文名 banana，芭蕉科芭蕉属多年生草本植物。"
  }
]

然后我们将卡片的标题绑定到 name 字段，卡片的内容绑定到 description 字段。

这时卡片就会通过列表进行渲染。

同样，还有很多可以使用列表的组件，比如下拉框选项、单选按钮选项、多选按钮选项、折叠面板等等。

通过将父组件中放入一个列表，然后再在列表中放入需要循环渲染的组件，这样就能够组合出各种各样的列表展示。

列表组件中也可以放入多个组件进行组合式的循环渲染。

3. 树组件 lc-tree

除了列表形式的组件可以绑定 data 属性字段，树组件也可以绑定 _data 字段。

拖入一个树组件放入到页面中，然后我们绑定如下的数据：

[
  {"id": 1, "label": "一级 1", "children": [{"id": 2, "label": "二级 1-1"}, {"id": 3, "label": "二级 1-2"}]},
  {"id": 4, "label": "一级 2", "children": [{"id": 5, "label": "二级 2-1", "children": [{"id": 6, "label": "三级 2-1-1"}]}, {"id": 7, "label": "二级 2-2"}]}
]

这样就渲染出了树结构。

_class 属性

项目中预置了大多数常见的单属性，我们可以通过简写的形式去使用，要想类名生效一定要遵守约定。

举几个例子来说明一下：

1. 设置 display: none；可以通过 d-n。
2. 设置 color: red；可以通过 c-red。
3. 设置 position: relative；可以通过 p-r。
4. 设置 padding-top: 5px；可以通过 pt-5。
5. 设置 margin-top: -10px；可以通过 mt--10。
6. 设置 cursor: pointer；可以通过 c-p。
7. 设置 width: 50%；可以通过 w_50。

类名的设定只要遵循以下几个原则：

1. key 中没有短横线，则直接取首字母，key 中有短横线，则取短横线分割之后的每个首字母。
2. value 中没有短横线，直接取首字母，value 中有短横线，则取短横线分割之后的每个首字母。
3. 将上面取到的两部分用短横线拼接起来，这样就构成了简写类名。
4. 如果属性是颜色，那么短横线后面就直接拼接去掉 # 的颜色值，或者完整英文。
5. 如果属性是宽高等数值类型，那么默认单位为 px，短横线后面直接拼接数值即可，如果是负值那么就用两个短横线连接，如果是百分比值那么就用下划线连接。如果是其他单位，那么需要在最后面明确指定。
6. 对于有冲突的属性，比如 min-width 和 max-width 简写都是 mw，那么就需要前缀全拼，即 minw-50 或 maxw-50。

类名格式

与将自定义类名绑定给组件，一个类名绑定多个属性对不同，我们这里是使用的单元类名的方式，也就是说你写的每一个类名都对应了一个单独属性对。

代码会根据类名自动生成相应的样式属性，不是穷举法预置的，也就是页面只会生成需要的样式，不会生成多余的样式，重用的样式只会生成一次，能达到复用的目的，这些对于使用者来说是无感的。

使用者只需要按照格式来命名类名即可。

我们秉持缩写的原则，即属性名的首字母缩写，然后再加上对应的值的首字母缩写，把他们用横线连接起来。

举几个例子：示例是表示它们可能的用法，各种用法之间可以自由组合。

宽度 width

宽度有几种指定方式：固定值、百分比值、全局值等。

其中 w 是 width 的缩写，vw 表示用视口宽度。 w-50: 表示宽度为 50px，等同于 width: 50px;。 w_50: 表示宽度为 50%，等同于 width: 50%;，百分比的值使用下划线。 vw_50: 表示宽度为视口的 50%，等同于 width: 50vw;。 minw-50: 表示最小宽度为 50px，等同于 min-width: 50px;，由于 min 和 max 首字母都是 m，并且他们都起到形容修饰的作用，因此对这种直接写全，同理最小高度就是 minh。

外边距 margin

外边距也有几种指定方式：固定值、百分比值、全局值等。

其中 m 是 margin 的缩写，ml 是 margin-left 的缩写，mx 是 margin-left 和 margin-right 的缩写，x 表示水平方向，同样 my 表示的是上下外边距。 m-10: 表示外边距 10px，等同于 margin: 10px;。 ml-10: 表示左外边距为 10px，等同于 margin-left: 10px;。 mt--10: 表示上外边距为 -10px，等同于 margin-top: -10px;。 mx-10: 表示左右外边距为 10px，等同于 margin-left: 10px;margin-right: 10px;。

定位 position

其中 p 是 position 的缩写，r 是属性值 relative 的缩写。 p-r: 表示相对定位，等同于 position: relative;。 p-a: 表示绝对定位，等同于 position: absolute;。

显示类型 display

其中 d 是 display 的缩写，b 是属性值 block 的缩写。 d-i: 表示行内，等同于 display: inline;。 d-ib: 表示行内块，等同于 display: inline-block;。 d-n: 表示隐藏，等同于 display: none;。 d-f: 表示弹性布局，等同于 display: flex;。

鼠标形状 cursor

其中 c 是 cursor 的缩写。 c-p: 表示手形状，等同于 cursor: pointer;。 c-na: 表示不允许操作，等同于 cursor: not-allowed;。

颜色 color

其中 c 是 color 的缩写，不用担心跟鼠标形状 cursor 会冲突，因为它们的值格式不同。 c-red: 表示红色，等同于 color: red;，可以直接指定颜色单词。 c-ff0000: 表示红色，等同于 color: #ff0000;，也可是指定 rgb 形式的颜色值。

背景色 background-color

其中 bgc 是 background-color 的缩写，这里没用 bc 的原因是因为我们熟悉背景的英文缩写就是 bg，因此这里沿用下来，也让人容易理解，而且也是为了避免与 border-color 相冲突。 bgc-123456: 表示背景色为 #123456，等同于 background-color: #123465;。

字体大小 font-size

其中 fs 是 font-size 的缩写。 fs-18: 表示字体大小为 18px，等同于 font-size: 18px;。

边框 border

其中 b 是 border 的缩写，后面的值分为三个，第一个表示边框宽度，第二个表示线的类型，第三个表示线的颜色，颜色可以是英文单词或者十六进制或者 rgb 等。 b-n: 表示不显示边框，等同于 border: none;。 b-1-solid-red: 表示 1px 的红色实线边框，等同于 border: 1px solid red;。 b-1-solid-ff0000: 表示 1px 的红色实线边框，等同于 border: 1px solid #ff0000;。

对齐方式 text-align

其中 ta 是 text-align 的缩写。 ta-c: 表示居中对齐，等同于 text-align: center;。

等等等等，其他的类名也都遵守上面的格式。不再一一列举。