利用可视化设计器构建你的应用系统-做一个懂你的人
文本
text 组件用于渲染最终的文本
这是一个最基本的组件。
所用用到文字的地方都可以使用文本组件。
比如标题、表格列内容、列表、按钮名称、表单label、提示文字等等等等，只要有文字的地方就会有文本组件。
它的值可以由两种形式来指定：内容形式和数据绑定形式。
内容
指定文本为具体内容，渲染完成之后作为最终纯文本展示，不会改变。
可以通过字符串和函数的方法指定：
字符串
- 纯字符串
需要静态展示的文本都可以使用纯字符串，选中使用字符串选项，填入相应文字即可：
- 从作用域取
如果文本的内容是从作用域中获取的，比如在表格或者列表中。
那么可以使用有#前缀的属性名来获取。
现在有一个单选按钮组，通过一个数组来控制渲染：
js
[{
label: '唱歌',
value: 'sing',
},{
label: '跳舞',
value: 'dance',
},{
label: '跑步',
value: 'run',
}]每个选项的文本都通过文本组件来渲染，并取数组项中label的值：
这样，文本组件就能够从作用域中拿到label的值，完成渲染：
函数
函数中可以编写任意的逻辑，通过返回值来指定文本内容：
js
() => {
return new Date().toLocaleString().replaceAll('/', '-')
}将会展示当前的时间：
函数中可以使用this获取到页面中所有的变量，也可以获取到当前的作用域。
数据绑定
如果文本的内容是从其他的地方获取的，现在这个值被放在了collectionData对象中，假设有个title字段：
那么就可以使用数据绑定，直接将它绑定到title上面：
注意要将内容形式中的"无"选中，也就是不使用内容形式，而使用数据绑定。
这样文本的内容就会跟collectionData对象中的title字段绑定起来。
当修改title的值时：
js
collectionData.title = '修改后的标题'页面中文本的内容也会随之改变：
我们也可以在使用数据绑定的时候，给它设置一个默认值，这样当绑定的值还不存在时，就会展示出默认值的内容。
lc-image 组件
指定的图片地址可以是相对路径或者绝对路径
-
如果是其他服务器上的资源，那么可以直接指定URL，根据绝对地址去加载
-
如果要引用 文件配置 中的资源，可以填写相对路径
例：images/logo.png
图形
绘制 html矢量图形，可用于扩展一些自定义的图标，基本属性包括：
启用使用 xicons选项， 并在 使用路径 中填入 svg 的path内容。
就会根据path的值渲染出对应的svg。
举个例子，比如在某网站上想使用其中的一个svg的图标。
打开控制台定位到当前的svg元素，可以看到它的渲染代码：
其中 svg标签的 viewBox 属性就是 上面svg属性面板的 viewBox
将 svg 标签的path内容复制到属性面板的使用路径里即可：
原生元素
除了内置封装好的组件，也经常会遇到需要使用原生html元素的情况。
目前页面设计器中，组件面板仅提供了最常用的html原生标签组件 div 和 span。
还有很多其他如 ui、li、video、b 等不胜枚举的元素，都可能会被使用到。
由于元素太多，全部内置进去是不可行的，这时候如果想在页面中添加其他原生标签的话可以使用 native 组件，它的意义就是可以添加任意标签。
比如我们想在页面中添加一个简单的 ul、li 列表元素，具有如下结构。
html
<ul>
<li>标题一</li>
<li>标题二</li>
</ul>那么就可以这样操作：
首先在页面中拖入一个 native 组件，在 native 组件属性面板的 渲染元素 输入框中填入 ul：
然后在当前 native 组件的默认插槽中再添加一个 native 组件，子 native 组件的 渲染元素 输入框里填入 li
再向子 native 组件的默认插槽中添加一个 text 组件，并设置内容为 标题一。
同样如上面再操作一遍添加 标题二。就完成了如图所示的效果：
该组件是可动态改变的组件。通过渲染元素 tag 来切换当前元素的 dom 类型。
渲染元素属性值可以是 html 原生元素的标签名称，如p、h1、ul等等，也可以是 elementUI 中的组件名，如el-input、el-radio等等，甚至是系统预定义的以 lc 开头的组件名。
但不建议使用除 html 的原生元素外的其他标签。
【项目体验】
系统管理端地址 ：http://www.lecen.top/manage