页面设计
页面设计器的使用，主要界面栏目功能及操作说明。
我们在做系统页面的时候，可以不用像传统开发那样，必须在本地启动开发环境，设计你的页面或者组件等，这里提供了可视化构建页面的能力，让你能够在网页中通过鼠标点点点来创建一个新的系统页面。
它也是我们系统的核心内容，我们将通过页面设计器来设计出统一的代码格式组成的页面，然后再用统一的解析页面来渲染整个系统。
换而言之，系统的所有页面全都由设计器设计出来，并且系统的所有页面全部都由一个页面解析并渲染出来。
由页面设计器设计出来的页面，全部都是所见即所得，设计出来什么样子，实际就是什么样子，不会放大缩小或者变形，我们可以对页面进行任何的设置，并且都是在设计页面实时生效的，所有的效果都与实际页面一样，也就是说不用使用预览功能就可以做到预览与交互。
功能分区
拖拽式可视化编辑创建页面。设计器主要界面
整个设计器大体分为三个部分：
- 视图绘制区域：整个页面的结构，这里放页面的组件。
- 组件面板：相当于设计页面时所需的物料区，所有的组件都能在这里找到。
- 属性面板：组件的操作面板，可以设置它的属性、事件、插槽等等。
组件面板
组件面板给我们提供了经常用到的一些 UI 组件，默认使用element-plus来渲染，你也可以指定为naive-ui，甚至使用你自己创建的组件。
可直接使用鼠标点击相应图标，并拖拽到视图绘制区域。
主要分为三栏，从左到右分别为：
基本组件栏： 一般的表单元素组件，或者一些基本元素的组件。
复合组件栏： 包含嵌套结构的元素组件等，也就是由多个基本组件组成。
反馈组件栏： 系统提示弹窗组件等，与用户有较强交互效果的组件。
注意：
页面初始需要放置行列组件，也就是说所有组件都是在最外层的行列组件内。在创建一个新页面时，最开始需要拖入的是行列。
就是区域2中的第一个组件，为了方便和显眼，我们把它放在了页面居中并偏左的地方，而且为它设置了一点颜色。
行列可以嵌套行列，以达到无限布局
组件面板提供了非常多的组件，还有一些隐藏组件没有显示出来，只有等到用到他们的时候才会自动展示出来。
将鼠标放到某个组件的右上角，会显示相应的提示信息，当通过外观分辨不出是什么组件的时候，可以通过该种方式查看组件的名称。
快捷操作
为了进行快速的操作，节省页面设计时间，也是为了更友好的交互，提供了一些快捷键，在实际使用中会经常用到。
| 按键 |
说明 |
| Alt |
唤出右侧属性面板 |
| 空格 |
唤出底部组件面板 |
| Shift + 空格 |
隐藏组件面板和属性面板 |
| Shift + 上/下/左/右 |
切换组件面板位置 |
| Shift + A |
唤出/隐藏 组件面板(修改层级) |
| Shift + D |
唤出/隐藏 属性面板(修改层级) |
视图绘制区
通过拖拽组件区中的行列组件，我们将它放置到视图绘制区中，这样就可以往行列组件中拖拽任意的组件了。
比如这里我们首先放置了一个新增按钮，然后又放置了一个查询输入框，最后我们又放置了一个查询的按钮。
因为查询按钮是最后放置的，因此目前默认它就是可编辑的状态，所有的设置都会对这个按钮生效。
默认情况下，被拖入的空行会用虚线显示出来，以方便查看和拖入其他组件，实际做好的页面中空行不会显示出来。
只要行组件被放置了其他组件，那么该行的虚线轮廓示意将会自动消失，显示成它实际该有的样子。
除此之外，还提供了右键的功能，比如我们在行列组件上右键的话，就会出现下面这样：
移除该行 的选项是高亮的，表示我们可以操作，点击后就会将该行以及它所包含的所有内容，全部从页面上删除掉。
填入该列 的选项是置灰的，表示我们目前不可以操作，这是因为还没有选中元素，如果有选中元素的话，那么使用该项就会把选中的元素填入到该列当中。
如果我们将右键放到其他组件上面使用的话，会出现不一样的效果：
移除 表示将该组件从当前页面移除掉。
移动 表示我们将要移动该组件，点击之后，该组件将处于可移动状态，也就是被标记为将要移动的状态。
放在前面 如果我们目前有可移动组件，那么我们可以将它放置到该组件的前面
放在后面 如果我们目前有可移动组件，那么我们可以将它放置到该组件的后面
比如我们在新增按钮上面右键，选择移动，然后在查询按钮上面右键，选择放在后面，那么页面就会变成这样：
而且我们会遇到一些特殊的情况，当你想要编辑一个下拉框的时候，如果是点击下拉框，那么并不会弹出对应的属性面板，而是展开下拉选项
这时我们就需要一个特殊的手段来处理它。
因此我们给这种特殊的组件增加了右键选中的功能
其他组件，比如按钮，是没有右键的选中菜单的，因为这类组件直接点击就可以进行编辑
但是也有特殊情况，比如我们给按钮绑定了一些事件，但是我只想编辑属性而不是触发事件，这时能够通过按住ctrl再点击右键来强制调出选中项：
选择之后就能够编辑对应的组件了：
由于我们拖拽的是一个按钮，那么默认也是编辑的这个按钮的配置，但是也可以点击里面的文字，进行文字的更改：
点击页面空白处，也就是没有组件的地方，是会隐藏组件面板和属性面板的。
快捷操作
选中某个组件之后，也可以通过快捷键来帮助做一些便捷的处理。
按键 |
说明 |
| ctrl + ↑ |
选择上一级组件，直到根元素的行组件 |
| ctrl + ← |
如果左边有兄弟组件，那么选中它 |
| ctrl + ↓ |
如果在行组件上操作，那么将会选中它的第一列，如果是在列组件上操作，那么将会选中它的第一个子组件，如果是在非行列组件上操作，并且有兄弟组件的话，那么选中它的最后一个兄弟组件 |
| ctrl + → |
如果右边有兄弟组件，那么选中它 |
| ctrl + click |
正常click会打开属性面板，但是如果想单纯的点击组件查看效果，那么可以按住ctrl再点击鼠标左键，这样就跟在真实业务场景下的页面中一样，不会弹出属性面板 |
| Ctrl + 鼠标右键 |
定位当前元素弹出选中 |
属性面板
当前添加或选择的组件的属性和事件等的相关配置。如图
当页面中包含一个组件的时候，我们希望能够对它进行任意的定制，组件属性面板给我们提供了入口，主要提供以下五个方面的配置
基础操作区域
所有组件都可以使用的功能，主要是围绕着组件做一些事情，而不是修改配置信息。
-
上一级 如果组件形成了嵌套关系，那么可以通过该按钮快速选择上一级，一直到当前的根元素，也就是行组件为止。
行组件这里有一些变化，能够进行上移和下移来调整行位置，并给出提示信息，这些都是可配置的，只要找到对应的配置文件进行修改即可。
-
左移 如果左边有兄弟组件，那么它将移动到该组件的左边。
-
右移 如果右边有兄弟组件，那么它将移动到该组件的右边。
-
移除 移除该组件。
-
固钉图标 属性面板默认是固定在页面右侧的，可以通过点击图标来解除固定，然后用鼠标按住图钉进行拖动就能够移动了。
-
当前组件 显示了当前组件的名称，如：按钮、输入框、表格等，右边有一个刷新图标，如果更改组件某个配置页面没有自动更新的话，可以点击该图标手动刷新状态。
-
滑动条 用来快速滚动页面，如果组件属性配置面板比较长，那么可以通过鼠标点击滑动条来快速切换到对应为止，滑动条中滑动块的位置与页面中的滚动条位置相对应，比如点击滑动条尾部，会直接自动跳转到属性面板的底部。
并且属性面板向下滚动的时候，滑动条会固定在面板顶部保持始终可见。
-
之前添加组件 点击该按钮之后，会自动弹出组件面板，选择对应组件之后，所选择的组件就会被插入到该组件的前面。
并且该按钮会自动转换成取消按钮，可以点击它来取消此次操作。
可以看到，组件面板中的所有组件全部变成高亮状态，并且显示出了很多隐藏的组件以供选择。
-
替换当前组件 选择的组件会替换掉当前的组件。
-
之后添加组件 选择的组件会被插入到该组件的后面。
属性区域
除了原生 div 或者 span 等标签元素，其他所有的组件全部都默认都由 element-plus 中的组件来渲染，因此属性区域可配置项默认包含了 element-plus 官网中对应组件的所有属性，但是也有一些公共的属性需要配置，这里对一些属性做一下陈述：
其中有所有组件都有的三个属性配置：
类名
可以给该组件添加类名，能够通过手动书写类名或者预置选择以及可视化设置的方式来添加。
比如我们给查询按钮添加一点样式：文字变成红色、宽度变为100px。
这里我们使用手输的方式，给按钮添加了两个类名，具体格式之后会详解，详情参见，现在按钮已经变了样子。
可以看到，按钮已经按照设置变成了我们想要的效果。
现在用预置选择的方式再来看一下，我这里预置了一个效果。
有一个圆角凸起的预置选项，我们选中它之后，其他什么都不用改，按钮就会发生变化。
而且它也有了鼠标悬浮等交互效果，每个组件的类名预置选项都是可以配置的，不会冲突，彼此之间相互独立。
点击类名旁边的小手，可以唤醒配置面板，
例如我们现在设置一个高度为60px的类名，然后再设置一个圆角为50%的类名
点击确定之后，按钮就自动添加上相应的类名了，样式实时生效
样式
如果有更定制化的样式设置，或者样式比较复杂，用单元类名写起来比较繁琐，那么可以使用该功能细致化的定制该组件的样式，所写的所有样式都只针对当前组件生效。
点击编写按钮之后，会弹出一个编辑框，里面就可以编写css代码了。
有三种编写的方式：
① 直接书写属性对。
② 将属性对包裹在一堆大括号中。
③ 以*开头的大括号内写属性对。
推荐使用第三种方式，因为这样会有代码提示：
我们给按钮添加一个样式，让它的文字变成蓝色：
点击对勾之后，我们就能看到变化啦：
深层样式
有时候我们不但要改变当前组件的样式，还要更改它子孙组件的样式，这个时候我们就可以使用深层样式来控制内部组件。
有点相当于我们平时写的深层选择器，为了更好的控制样式生效范围，我们规定必须手动指定一个选择器，再在这个基础上去控制深层组件。
比如现在我们有一个行内卡片，它的默认padding是20px：
显然，通过单元类名或者样式都是无法更改头部区域和内容区域的padding值的，这时我们使用深层样式对它进行更改：
根据上面我们的约定，mini-card就是我们手动指定的选择器，编写完深层样式之后，我们还需要对该组件指定这个选择器：
现在我们想要的效果就已经达成啦：
这时，再新增的card组件或者其他既有card组件不会收到影响，还是展示默认的效果，如果也想同步这样的效果，只需要给那个组件也加上mini-card类名即可。
其实可以发现，我们不但可以修改当前组件内的深层样式，也可以通过父级来修改当前组件的样式，甚至可以通过根组件来统一管理当前行的所有样式。
除了上面这三个公共属性，还有一些非常重要的属性，只不过它们只存在于一些特殊的组件。
列
行组件的专有属性
默认一行有一个列，并且最少有一个列，遵循24栏布局，可以继续添加或者删除列。
也可以设置列的间距，以及水平和垂直方向上的对齐方式等。
model绑定
像输入框、下拉框等表单元素组件，都会产生数据交互，包括一些自定义组件也是，它们都支持model的绑定。
model的绑定一共由两个属性的组合来支持，一个是设定它的key，也可以叫做它的name，对于表单数据对象来说就是key-value对中的key，对于提交到后端的数据来说就是字段的名称name。
另一个就是设置的默认值，也就是未赋值的情况下，该组件显示的值。
model的绑定方式有两种：
- 直接写名称，那么它们都会被收集到根对象中以供提取和使用：
注：根对象是针对当前页面的，不同的页面有不同的根对象
比如我们设计了三个输入框，分别是手机号、邮箱、住址，它们的model分别是phone、email、address：
collectionData中已经有了，现在给这三个输入框分别输入点内容：
看下它们值的变化：
- 通过用点(.)来连接多个名称，那么它们会被自动收集到设定的对象里面，并可以通过跟对象进行访问。
现在我们假定上面的三个输入框属于同一个表单，把他们绑定在对象userInfo上面，类似于这样：
再看下此时它们被收集到了哪里：
这样就可以通过userInfo来访问三个输入框的值了，同理，支持无限层级的嵌套。
model的默认值也有两种绑定方式：
- 普通数据类型，可以指定为数字、字符串、布尔值、数组等等。
比如输入框可以指定为字符串，多选按钮指定为数组：
这个时候页面上这两个组件的默认值就会自动更新了：
- 函数，默认值将是该函数的返回值。
填充数据
有一些组件的渲染需要一些动态数据，比如表格、下拉框、复选框组等等，这些数据可以是自定义的，也可以是从后端读取的。
这里又追加了一种list的类型，也是可以填充数据的，主要包含了三个功能点：
- 填充数据，可以绑定接口返回值，这个需要先给当前页面配置接口。
填充数据有三种方式：通过绑定接口返回值、通过绑定作用域插槽数据、通过绑定 collectionData 中的数据。
填充数据如果是 requestData 中的请求链接里返回的数据，直接从下拉选项选择所返回的对象属性名称即可。如果是从 collectionData 中获取可以在输入框中输入 @属性名， @ 符号表示从 collectionData 取值。还可以使用 # 符号，表示在当前作用域插槽下取值，比如 #childrens ，表示取当前组件作用域插槽下的childrens数组。
比如现在有一个表格，数据需要从接口获取，已经给页面配置好了一个获取歌曲列表的请求链接：
那么就可以从填充数据中绑定它：
这个接口返回一个数组，每一项包含四个字段：title、singer、time、hot。详情可参考 请求链接
现在已经将数据绑定到表格上面了，那么接下来就可以指定列绑定相应的字段来渲染了，首先给表格建四个列：
直接点击表格头部，就可以编辑对应列的名称了。
点击对应的列，编辑它所渲染的内容，# 表示一级作用域插槽数据，也就是当前作用域插槽的数据，如果是##就表示上级作用域插槽的数据，其中row表示el-table列作用域插槽数据中的行数据，title就表示插槽数据的title字段值。
其中#也可以放在最左边，也就是 row#title 和 #row.title 是一样的，#row.title 可能比较好理解，表示当前作用域的行数据的title字段，上图中那样写是为了将对象写在#左边，#右边只写字段，因为它也可以写成 a.b.c#d 的形式。
然后就能看到表格已经自动渲染了我们所绑定的数据：
其实上面已经顺带着演示了作用域插槽的使用，而我们填充的数据同样也是可以从作用域插槽中来获取。
如果我们在页面初始化或者其他地方给 collectionData 中赋值了一个数据对象，那么填充的数据也可以取的到。比如我们有这样是一个数据：
在collectionData中赋值了一个tableData属性，它的值是一个数组。
[{
title: '稻香',
singer: '周杰伦',
hot: 999,
time: '03:43'
},{
title: '关不上的窗',
singer: '周传雄',
hot: 999,
time: '04:56'
},{
title: '口是心非',
singer: '张雨生',
hot: 999,
time: '04:56'
},{
title: '水手',
singer: '郑智化',
hot: 999,
time: '04:57'
}]
现在我们将表格的数据源绑定到这个数组上面，作用域插槽使用 # 关键字，要引用 collectionData 中的属性使用 @ 关键字。
现在就绑定完成啦，表格会自动读取该数组来渲染：
并且现在修改tableData的数据，页面也会实时修改更新。
- 测试数据，可以手动更改请求链接的参数，如果填充数据使用的是接口的返回值，那么有可能这个接口在请求的时候需要动态传一些必填的参数。
在设计阶段，如果接口能够直接发起请求并返回数据，那么页面绑定接口之后就会自动发起请求并将返回数据绑定到页面上。
如果需要动态获取或者根据业务实时改变参数的接口，就可以使用测试数据的功能，它能够让我们先临时指定参数的值，来模拟实际场景的效果。
有一个获取字典的接口，可以通过code来查询对应的字典项，默认code是空的：
将填充数据绑定到这个接口，那么我们就可以通过测试数据来指定某个code值以让接口发起请求：
- 手动指定数据，有一些填充数据不需要通过上面这些方式绑定，比如性别男女，或者选项是否等，就可以通过手动编辑组件需要渲染的数据。
有一个单选按钮组，通过一个列表渲染出多个radio的选项，手动指定列表的数据如下：
绑定选项的label属性，内容是通过文本组件渲染，从作用域中获取数据：
现在页面中就会呈现出效果：
比如我们再加一个保密的选项，直接修改手动指定数据的内容即可：
[{
label: '男',
value: 1
},{
label: '女',
value: 0
},{
label: '保密',
value: 2
}]
页面也实时回显效果：
事件区域
可配置组件暴露的事件，它们都能通过编写代码的方式进行事件的添加和绑定。
比如输入框暴露出的事件有：
单选按钮组暴露出的事件有：
也可以通过单击【添加】设置 on_事件名 来绑定事件。
插槽区域
包含了组件支持的所有插槽，能够对插槽进行各种操作。
例如输入框的插槽：
所有插槽全部包含三个功能：添加、删除、查看元素
- 添加
可以对该插槽添加组件，点击之后自动弹出组件面板，选中组件之后，该组件就会被添加到该插槽当中。
给输入框组件添加一个 prepend 插槽和一个 suffix 插槽。
prepend是一个文本：
suffix是一个图标：
两个插槽添加成功：
如果某些组件更适合被添加，那么会自动高亮，比如给 table 添加插槽，table-column 会高亮，给 select 添加插槽，option 会高亮等等。
- 删除
可以直接清空插槽，无论该插槽中有多少个组件都会被一次性删除掉，如果想一个一个删除，那么选择到对应组件，使用组件的移除功能。
删除掉刚才的prepend插槽中的组件：
现在就只剩suffix插槽了。
- 元素
可以查看当前插槽中所包含的所有组件，用列表的方式展现，单击列表中的项，能够直接跳转到对应组件的配置面板。
我们查看suffix插槽中的组件：
单击icon，就能够编辑这个icon组件的配置了：
其他定义区域
在这里能够增加权限控制、获取页面DOM、获取渲染的视图、添加事件监听等等。
上面是书写规范的说明，下面是一个添加的按钮。
比如给按钮添加一个dataset，点击[+添加]可以输入对应的key和value。
其中key为_data-level，value为1。看下DOM元素：
之后可以对它进行引用和操作了。
也可以添加事件，按钮组件默认没有暴露出任何事件，但是我们可以手动添加点击事件。
它的key为on_click，value为一个函数：
function _() {
console.log('点击了按钮')
}
然后我们点击按钮就能够看到函数的执行效果：
既可以直接编写逻辑，也可以调用执行寄连，还能够操作组件、修改变量、发起请求等等等等。
在一个方法中你可以做任何事情。
如果一个属性的的值是通过函数返回的，那么这个value也可以设置为函数，只需要把函数命名为 attribute 即可。
比如将刚才的dataset设置为一个函数返回值：
function attribute() {
return 2
}
那么页面中也是会实时变更的：
如果一个属性的值，本身就需要是一个函数，比如下拉框的过滤属性filter-method，它的值就是一个函数，那么这时你可以任意命名，建议将函数命名成 _。
右边侧栏
除了上面的三个大板块，页面设计器还包含了一些其他的配置功能。
主要用来配置当前页面使用的执行寄连、请求链接，还有页面整体的样式设计，以及选择元组等。还列出了当前设计页面所包含的所有组件。
默认是虚化状态，鼠标悬浮会高亮
上面从上到下的按钮依次为:全局配置、元素面板、元组面板、保存。
全局配置
针对整个页面进行配置，点击会展开一个菜单：
按逆时针呈现的三个图标，分别表示：
- 整页样式调整
包括class设置、style设置、深层样式设置。
设置规则同组件一样。见上面
- 页面执行寄连配置
弹窗分左右两个列表，右侧列表表示当前已添加的执行寄连。
支持检索，点击添加按钮即可将该执行寄连绑定到该页面上，也可以点击移除从该页面中移除绑定。
- 页面请求链接配置
弹窗分左右两个列表，右侧列表表示当前已添加的请求链接。
支持检索，点击添加按钮即可将该请求链接绑定到该页面上，也可以点击移除从该页面中移除绑定。
绑定完请求链接，就可以在组件的填充数据中选择绑定的数据项了。
元素面板
当设计页面时，有可能有些组件不太好找到或者被选取到，这样就不容易配置它的属性，这时就可以从元素面板中找到它，点击对应的名称就可以自动定位到该组件，并打开它的属性配置面板。
元组面板
如果设计了多个元组，那么就可以通过元组面板来选取，达到快速设计的目的。
比如我们之前设计的歌曲列表页面。
现在使用这个页面生成一个元组，注意元组是用来做复用的，这里只是一个演示。
那么就可以在元组面板中看到了：
会以缩略的形式展现出来，单击对应的元组就可以添加到当前页面了，这里目前只有一个元组供选择。
该元组已经被添加到刚刚做演示的页面中。
默认情况下，被添加进来的元组是不允许编辑的，因为它是公用的复合组件，如果需要修改，可以去修改元组，这样用到该元组的地方就会全部自动更新。
点击该元组的任何地方，弹出的属性面板都是空白的，无法配置的。
如果确实需要特殊化处理，只是为了快速复用，有一些独立修改的地方，那么可以点击解除关联绑定，这样就可以对元组进行编辑了，并且不会影响其他用到的页面。同样，修改元组之后该页面也不会变化。
保存
也就是设计完成按钮，点击该按钮会对页面进行保存，如果是第一次设计，会弹出基本信息输入的窗口
其他
就像元组一样，我们还有模板的概念，它不同于元组，如果我们设定一个页面为模板的话，那么在用页面设计器新建一个页面的时候，会先提供模板选择的功能。
比如我们没有模板的时候新建页面是这样的：
因为没有任何模板可供选择，因此只有一个新建的图标，点击新建图标，就可以全新的设计一个页面了。
再将刚才歌曲列表的页面生成一个模板，那么我们在新建页面的时候就会是下面这样：
就跟word一样，使用模板会快速的生成一个页面，可以自建任意多的模板。
每个页面在生成元组或者模板的时候，都会自动生成缩略图，方便选择。
【项目体验】
系统管理端地址 ：www.lecen.top/manage
系统用户端地址 ：www.liudaxianer.com/user
系统文档地址 ：www.lnsstyp.com/web
登录
