标准组件库
一、介绍
以拖拽的方式快速形成页面。以拖拽的方式快速形成页面。
1.用法
- 在可视化页面编辑器界面中以拖拽的形式从组件库中选择‘单行文本框’拖到编辑区
- 单击组件,右侧属性栏出现该组件的属性，根据实际需求输入或选择属性值
- 点击上方'预览'按钮可查看效果
- 点击'保存'存储页面，
页面标签名：该页面的文件名API：该页面的地址，且不可重复；用于展示该页面时pageApi的查询地址
2.公共样式
- 帮助文档：组件的使用手册
- 单位：组件宽高的单位，可选值像素/百分比/视口
- 宽：组件在页面中的宽度
- 高：组件在页面中的高度
- 字号：组件中字体的大小
- y坐标：组件距离页面顶部的距离
- x坐标：组件距离页面左侧的距离
3.公共属性
- 组件ID：每个组件的唯一标识
- 上传数据对应的key，可修改：建议输入具名key，例如 username
- 默认值：内容
4.公共事件
分别在生命周期created、mounted、destroyed函数中写方法；参数self即this,本组件的vue实例，可调用本组件的方法（getObject()、setOject(obj)、getValue()、setValue(value)、getKey()、setKey(key)等）
- 创建时调用：
JavaScript
function created(self) {
// self即this,本组件的vue实例
} |
- 显示时调用：
JavaScript
function mounted(self) {
// self即this,本组件的vue实例
} |
- 销毁时调用：
JavaScript
function destroyed(self) {
// self即this,本组件的vue实例
} |
二、基础：按钮 cloudcc-button
1.属性
- 主题：可选值primary / success / warning / danger / info / text
- 组件ID,使用英文逗号分隔：通过其他组件的ID获取组件的值，
- 方法体：根据实际需求给按钮写入方法函数，可使用vuale.getValue()获取其他组件的值
function test(conext,value) {
alert(JSON.stringify(value.getObject()))
}- 网络请求地址：写入上述定义的方法中用到的请求数据接口地址
- 返回体处理：用于处理响应数据后的动作，例如：提示提交成功
// self：当前组件上下文，res：响应数据
function test(self,res) {
console.log(res)
}2.事件
- 鼠标移入：
function myMouseover(self) {
// self即this,本组件的vue实例
}三、基础：分割线 cloudcc-sep-line
1.用途
区隔内容的分割线。
2.属性简介
- 字体颜色：文本颜色
- 线条颜色：线条颜色
- 线条样式：线条样式，可选值solid/deshed/dotted
- 线条宽度：线条宽度，单位px
四、基础：卡片 cloudcc-card
1.用途
将信息聚合在卡片容器中展示。
2.属性简介
- 样式：行内样式，原生style
- 阴影显示时机：设置阴影显示时机，shadow / always / hover / never
3.事件简介
- 鼠标移入：
function myMouseover(self) {
// self即this,本组件的vue实例
}五、基础：图片 cloudcc-image
1.用途
图片容器，在保留原生img的特性下，支持懒加载，自定义占位、加载失败等。
2.属性简介
- 样式：行内样式，原生style
- 图片源：图片来源，原生src
- 图片自适应方式：确定图片如何适应容器框，原生 object-fit
- 可选值：fill / contain / cover / none / scale-down
- 是否开启懒加载：是否用懒加载
- 图片预览层级：设置图片预览的 z-index
- 图片预览地址，请使用逗号分隔：大图预览的地址
3.事件简介
- 鼠标移入：
function myMouseover(self) {
// self即this,本组件的vue实例
}六、表单：标题 cloudcc-label
1.用途
label标题，用于输入文本信息。
2.属性简介
- 对齐方式：vertical-align属性，可选值baseline、top、middle、bottom、sub、text-top
- 是否必填：是否可以为空值
七、表单：多选框 cloudcc-checkbox
1.用途
checkbox多选框组，用于一组备选项中进行多选。
2.属性简介
- 数据内容：选项
[
{
"label":"选项一",
"value": 1
},
{
"label":"选项二",
"value": 2
}
]- 组件样式：radio样式/radio-button样式
- 至少应选：可被勾选的 checkbox 的最小数量
- 最多可选：可被勾选的 checkbox 的最大数量
- 是否禁用：disable属性
- 是否带边框：是否显示边框border属性
八、表单：单选框 cloudcc-radio
用途
radio单选框组，用于在一组备选项中进行单选。
属性简介
- 数据内容：选项
[
{
"label":"选项一",
"value": 1
},
{
"label":"选项二",
"value": 2
}
]- 组件尺寸：仅对按钮形式的 Radio 或带有边框的 Radio 有效，可选值medium / small / mini
- 组件样式：radio样式/radio-button样式
- 是否禁用：disable属性
- 是否带边框：是否显示边框border属性
九、表单：步骤条 cloudcc-processbar
1.用途
引导用户按照流程完成任务的分步导航条，可根据实际应用场景设定步骤，步骤不得少于 2 步。
2.属性简介
- 上传数据对应的key，可修改：
- 初始数据内容：组件最先显示的内容
- 请求体：根据实际需求给按钮写入方法函数，可使用vuale.getValue()获取其他组件的值
function test(conext,value) {
alert(JSON.stringify(value.getObject()))
}- 接口地址：写入上述定义的方法中用到的请求数据接口地址
- 返回体：用于处理响应数据后的动作，例如：提示提交成功
// self：当前组件上下文，res：响应数据
function test(self,res) {
console.log(res)
}3.事件简介
- 标记状态点击事件：
function markStatus(self) {
// self即this,本组件的vue实例
}十、表单：单行文本框 cloudcc-input
1.用途
text文本框，用于输入单行文本信息。
2.属性简介
- 输入框占位文本：原生placeholder属性
- 组件尺寸：输入框尺寸，可选值medium / small / mini
- 前缀：输入框前置内容，只对 type="text" 有效
- 后缀：输入框后置内容，只对 type="text" 有效
- 前图标：输入框头部图标
- 后图标：输入框尾部图标
- 最多输入几个字符：最大输入长度，需配合‘字数统计’使用
- 关联组件ID，使用英文逗号分隔：输入其他组件的唯一ID
- 方法体：
function test(conext,self,value) {
alert(JSON.stringify(value.getObject()))
}- 是否禁用：disable属性
- 是否只读：readonly属性
- 字数统计：选中状态下可与‘最多输入几个字符’配合使用
- 能否清空：输入框内容是否可清空
- 密码图标：是否显示切换密码图标
3.示例
- 前缀、后缀效果图
- 前图标、后图标效果图
十一、表单：多行文本框 cloudcc-textarea
1.用途
text文本框，用于输入多行文本信息。
2.属性简介
- 组件尺寸：输入框尺寸，可选值medium / small / mini
- 最多输入几个字符：最大输入长度，需配合‘字数统计’使用
- 最小行数：自适应内容高度
- 最大行数：自适应内容高度
- 是否禁用：disable属性
- 是否只读：readonly属性
- 字数统计：选中状态下可与‘最多输入几个字符’配合使用
十二、表单：滑块 cloudcc-slider
1.用途
slider滑块，通过拖动滑块在一个固定区间内进行选择。
2.属性简介
- 最小值：开始值
- 最大值：结束值
- 步长：每一步的增减值
- 显示间断点：是否显示间断点
- 显示tooltip：是否显示 tooltip
- 范围选择：是否为范围选择
- 是否禁用：disable属性
十三、表单：级联选择器 cloudcc-cascader
1.用途
cascader级联选择器，用于当一个数据集合有清晰的层级结构时，可通过级联选择器逐级查看并选择。
2.属性简介
- 数据内容：option选项
[
{
"value": "ziyuan",
"label": "资源",
"children": [
{
"value": "axure",
"label": "Axure Components"
},
{
"value": "sketch",
"label": "Sketch Templates"
},
{
"value": "jiaohu",
"label": "组件交互文档"
}
]
}
]- 选项分隔符：输入框中选项值的分隔符
- 标签键名：指定选项标签为选项对象的某个属性值
- 值键名：指定选项的值为选项对象的某个属性值
- 子级键名：指定选项的子选项为选项对象的某个属性值
- 是否禁用：disable属性
- 能否清空：是否可以清空选项
- 完整路径：输入框中是否显示选中值的完整路径
- 是否多选：multiple属性
- 是否折叠Tag：多选模式下是否折叠Tag
- 能否搜索：是否可搜索选项
十四、表单：计数器 cloudcc-input-number
1.用途
input-number文本框，用于输入标准的数字值，可定义范围。
2.属性简介
- 组件尺寸：输入框尺寸，可选值medium / small / mini
- 按钮位置：控制按钮位置（默认/右侧）
- 最小值：设置计数器允许的最小值
- 最大值：设置计数器允许的最大值
- 步长：每一步的增减值
- 精度：数值精度
- 是否禁用：disable属性
- 严格步数：是否只能输入 步长 的倍数
十五、表单：开关 cloudcc-switch
1.用途
switch开关，表示两种相互对立的状态间的切换，多用于触发「开/关」。
2.属性简介
- 开启提示：switch 打开时的值
- 关闭提示：switch 关闭时的值
- 开启背景色：switch 打开时的背景色
- 关闭背景色：switch 关闭时的背景色
- 是否禁用：disable属性
十六、表单：评分 cloudcc-rate
1.用途
rate评分，用于评分组件。
2.属性简介
- 最大分值：最高分
- 是否为只读：disable属性
- 是否允许半选：是否允许选择半分值
- 低分和中分界限值：低分和中等分数的界限值，值本身被划分在低分中
- 高分和中分界限值：高分和中等分数的界限值，值本身被划分在高分中
- icon的颜色。若传入数组，共有3 个元素，为3个分段所对应的颜色；若传入对象，可自定义分段，键名为分段的界限值，键值为对应的颜色：例如['el-icon-star-on', 'el-icon-star-on','el-icon-star-on']
- 未选中icon的颜色：例如#C6D1DE
- 只读时未选中icon的颜色：例如#EFF2F7
- 未选中icon的类名：例如el-icon-star-off
- 只读时未选中icon的类名：例如el-icon-star-on
- 是否显示辅助文字，若为真，则会从tests数组选取当前分数对应的文字内容：默认false
- 是否显示当前分数，show-score和show-text不能同时为真：辅助文字和当前分数不能同时被选择
- 辅助文字的颜色：例如#1F2D3D
- 辅助文字数组：例如['极差', '失望', '一般', '满意', '惊喜']
- 分数显示模板：类型值{value}
十七、表单：日期选择器 cloudcc-date-picker
1.用途
date-time-picker日期时间选择器，用于在同一个选择器里选择日期和时间。
2.属性简介
- 提示语：placeholder属性
- 组件尺寸：输入框尺寸，可选值medium / small / mini
- 显示类型：可选值year/month/date/week/ datetime/datetimerange/daterange
- 时间格式：显示在输入框中的格式，默认值'yyyy-MM-dd HH:mm:ss'，
- 头部图标类名：自定义头部图标的类名
- 清空图标类名：自定义清空图标的类名
- 是否只读：readonly属性
- 是否禁用：disable属性
- 能否清空：是否显示清除按钮
- 能否输入：是否完全只读
- 是否使用箭头进行选择：是否使用箭头进行时间选择
- 是否为范围选择：是否为时间范围选择
- 开始时间占位内容：范围选择时开始日期的占位内容
- 结束时间占位内容：范围选择时结束日期的占位内容
- 范围分隔符：选择范围时的分隔符
十八、表单：时间选择器 cloudcc-time-select
1.用途
time-picker时间选择器，用于选择或输入日期。
2.属性简介
- 提示语：placeholder属性
- 组件尺寸：输入框尺寸，可选值medium / small / mini
- 可选时间段：可选时间段，例如'18:30:00 - 20:30:00'或者传入数组['09:30:00 - 12:00:00', '14:30:00 - 18:30:00']
- 时间格式：时间格式化(TimePicker)，默认值'HH:mm:ss'，
- 头部图标类名：自定义头部图标的类名
- 清空图标类名：自定义清空图标的类名
- 是否只读：readonly属性
- 是否禁用：disable属性
- 能否清空：是否显示清除按钮
- 能否输入：是否完全只读
- 是否使用箭头进行选择：是否使用箭头进行时间选择，仅对<el-time-picker>有效
- 是否为范围选择：是否为时间范围选择，仅对<el-time-picker>有效
- 开始时间占位内容：范围选择时开始日期的占位内容
- 结束时间占位内容：范围选择时结束日期的占位内容
- 范围分隔符：选择范围时的分隔符
十九、表单：下拉框 cloudcc-select
1.用途
select下拉选择器，用于当选项过多时，使用下拉菜单展示并选择内容。
2.属性简介
- 数据内容：option选项
[
{
"label":"选项一",
"value": 1
},
{
"label":"选项二",
"value": 2
}
]- 组件尺寸：输入框尺寸，可选值medium / small / mini
- 是否禁用：disable属性
- 是否多选：multiple属性
- 最多可选：多选时用户最多可以选择的项目数，为 0 则不限制
- 能否清空：是否可以清空选项
- 能否过滤：是否可搜索
二十、数据：cloudcc-iframe
1.用途
iframe 元素会创建包含另外一个文档的内联框架（即行内框架）。
2.属性简介
- URL地址：规定在 iframe 中显示的文档的 URL。
- 打开方式：target属性,参数值主要有：_blank、_parent、_self、_top
- _blank：在浏览器新窗口中打开链接。
- _parent：将链接的文件载入含有该链接框架的父框架集或父窗口中。如果含有该链接的框架不是嵌套的，则在浏览器全屏窗口中载入链接的文件，就像_self参数一样。
- _self：在同一框架或窗口中打开所链接的文档。此参数为默认值，通常不用指定。
- _top：在当前的整个浏览器窗口中打开所链接的文档，因而会删除所有框架。
- 规定iframe的名称：frame_name
- 规定元素的额外信息（可在工具提示中显示）：指定元素的提示文本
- 对iframe的内容定义一系列额外的限制：
- sandbox：可选值""、allow-forms、allow-same-origin、allow-scripts、allow-top-navigation
二十一、数据：表格 cloudcc-table
1.用途
table表格，用于展示多条结构类似的数据，可对数据进行排序、筛选、对比或其他自定义操作。
2.属性简介
- 表头、内容控件配置：
- 是否排序：该列数据是否可排序
- 标题：label
- 数据对应字段：props
- 宽度：该列的宽度，默认自动撑开
- 显示控件：可选值 文本/链接/输入框/选择框/下拉框
- ➖：删除该选项
- ➕：添加新的column选项
- 当内容控件为select时需配置的选项：若上述 显示控件 选择下拉框，需设置option选项
[
{
"label":"选项一",
"value":"选项一"
},
{
"label":"选项二",
"value":"选项二"
}
]- 合并行或列：单元格合并
function test({ row, column, rowIndex, columnIndex }){
}- 组件尺寸：Table 的尺寸,可选值medium / small / mini
- 默认排序的列：输入该列的label值
- 默认排序的顺序：可选值ascending/descending（正序/倒序）
- 空数据显示的文本：表格无数据时表格内容的提示信息，默认‘暂无数据’
- 是否展示斑马纹：是否为斑马纹 table
- 是否带边框：是否带有纵向边框
- 列的宽度是否自动撑开：列的宽度是否自撑开，默认true
- 是否展示表头：是否显示表头，默认true
- 是否展开所有行：若为true则type="expand"，表头出现向右的箭头，可点击展开该行数据
- tooltip effect属性：可选值dark/light
- select-on-indeterminate：在多选表格中，当仅有部分行被选中时，点击表头的多选框时的行为。若为 true，则选中所有行；若为 false，则取消选择所有行
- 树节点的缩进：展示树形数据时，树节点的缩进（距离左边的数据）
- 是否懒加载子节点：是否懒加载子节点数据
- 是否显示排序列：是否显示有序号的列
- 是否显示操作列：是否显示有自定义操作的列
- 操作列选项配置：
- 显示名称：要操作的名称，如：查看/删除/修改
- 名称对应的key：与名称对应的key值，如：look/delete/update
- pageApi：点击操作打开对应的的dialog页面的页面地址（保存页面时所写的API）
- requestApi：数据请求地址
- ➖：删除该项
- ➕ 添加选项：添加新的操作项
- 对应列的类型：如果设置了 selection 则显示多选框；如果设置了 expand 则显示为一个可展开的按钮
- 对齐方式：表格的对齐方式，可选值left/center/right
- 表对齐方式：表头对齐方式，若不设置该项，则使用表格的对齐方式，可选值left/center/right
- 能否拖动改变宽度（需border属性为真）：对应列是否可以通过拖动改变宽度（需要在 el-table 上设置 border 属性为真）
- 是否显示tooltip：当内容过长被隐藏时是否显示 tooltip
- 表头背景色：表头的背景颜色
- 接口地址：用于table表格获取数据的接口访问地址
http://localhost:8080/api/openCall/common- 请求体：function方法，用于处理访问接口的请求参数
function test() {
let requestParams = {
className: "TestUpdate", // 类名 string
methodName: "queryGao", // 方法名 string
params: [
{
"argType": "java.lang.String",
"argValue": "1111",
},
{
"argType": "java.lang.String",
"argValue": "2222",
}
], // 请求参数
};
return requestParams;
}- 返回体：function方法，用于处理访问接口的返回数据
function test(res){
let dataList = []
if (res.data.status) {
if (res.data.contactList.length > 0) {
dataList = res.data.contactList
}
}
return dataList
}二十二、数据：树形控件 cloudcc-tree
1.用途
用清晰的层级结构展示信息，可展开或折叠。
2.属性简介
- 数据内容：date
[
{
"id": 1,
"label": "一级 1",
"children": [
{
"id": 4,
"label": "二级 1-1",
"children": [
{
"id": 9,
"label": "三级 1-1-1"
},
{
"id": 10,
"label": "三级 1-1-2"
}
]
}
]
}
]- 空数据显示文字：empty-text,内容为空的时候展示的文本
- 每个树节点用来作为唯一标识的属性，整棵树应该是唯一的：node-key
- 是否在第一次展开某个树节点才渲染子节点：render-after-expand,可选值true/flase
- 是否高亮当前选中节点：highlight-current
- 是否默认展开所有节点：default-expand-all
- 是否在点击节点的时候展开或者收缩节点：expand-on-click-node
- 展开子节点的时候是否自动展开父节点：auto-expand-parent
- 默认展开的节点的key的数组：default-expanded-keys
- 节点是否可被选择：show-checkbox
- 在显示复选框的情况下，是否严格的遵循父子不互相关联的做法：check-strictly
- 默认勾选的节点的key的数组：default-checked-keys
- 当前选中的节点：current-node-key
- 是否每次只打开一个同级树节点展开：accordion
- 相邻级节点间的水平缩进，单位为像素：indent
- 自定义树节点的图标：icon-class
- 是否开启拖拽节点功能：draggable
- 关联组件ID，使用英文逗号分隔：
- 节点被点击时的回调：node-click，共三个参数，依次为：传递给 data 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身。
function handleNodeClick(context,value,data,node,dom) {
console.log(data);
}- 接口地址：接口访问地址
- 请求体：请求参数，function方法
function test() {
let requestParams = {
"className": "TestUpdate",
"methodName": "queryGao",
"params": []
}
return requestParams
}- 返回体：返回的数据，function方法
function test(res){
let dataList = []
if (res.data.status) {
if (res.data.contactList.length > 0) {
dataList = res.data.contactList
}
}
return dataList
}二十三、组合：Group
1.用法
1、将组件拖入画布，框选组件
2、点击‘组合’按钮
3、在属性栏样式‘布局方式’中选择一种方式
2.布局方式-flex
概述：采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。
每一项的比例：flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]；
- flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选；
- flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
- flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
- flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。
主轴的方向：主轴的方向（即项目的排列方向），flex-direction: row | row-reverse | column | column-reverse;
- row（默认值）：主轴为水平方向，起点在左端。
- row-reverse：主轴为水平方向，起点在右端。
- column：主轴为垂直方向，起点在上沿。
- column-reverse：主轴为垂直方向，起点在下沿。
项目在主轴上的对齐方式：justify-content: flex-start | flex-end | center | space-between | space-around;
- flex-start（默认值）：左对齐
- flex-end：右对齐
- center： 居中
- space-between：两端对齐，项目之间的间隔都相等。
- space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
项目在交叉轴上的对齐方式：align-items: flex-start | flex-end | center | baseline | stretch;
- flex-start：交叉轴的起点对齐。
- flex-end：交叉轴的终点对齐。
- center：交叉轴的中点对齐。
- baseline: 项目的第一行文字的基线对齐。
- stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
一条轴线排不下，如何换行：flex-wrap: nowrap | wrap | wrap-reverse;
- nowrap（默认）：不换行。
- wrap：换行，第一行在上方。
- wrap-reverse：换行，第一行在下方。
3.布局方式-grid
概述：采用网格布局的区域，称为"容器"（container）。容器内部采用网格定位的子元素，称为"项目"（item）。
每一列的列宽：grid-template-columns: 100px 100px 100px;单位可用px或%
repeat()：grid-template-columns: repeat(3, 33.33%);
auto-fill 关键字：grid-template-columns: repeat(auto-fill, 100px);
fr 关键字：grid-template-columns: 1fr 1fr;
minmax()：grid-template-columns: 1fr 1fr minmax(100px, 1fr);
auto 关键字：grid-template-columns: 100px auto 100px;
网格线的名称：grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4];
布局实例：grid-template-columns: 70% 30%;
每一行的行高：grid-template-rows: 100px 100px 100px; 单位可用px或%
行与行的间隔：行间距，grid-row-gap: 20px;
列与列的间隔：列间距，grid-column-gap: 20px;
划分网格后的放置顺序：grid-auto-flow: column/row;
- row，默认值，"先行后列"
- column，"先列后行"
单元格内容的水平位置：justify-items: start | end | center | stretch;
- start：对齐单元格的起始边缘。
- end：对齐单元格的结束边缘。
- center：单元格内部居中。
- stretch：拉伸，占满单元格的整个宽度（默认值）。
单元格内容的垂直位置： align-items: start | end | center | stretch;
整个内容区域在容器里面的水平位置：justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
- start - 对齐容器的起始边框。
- end - 对齐容器的结束边框。
- center - 容器内部居中。
- stretch - 项目大小没有指定时，拉伸占据整个网格容器。
- space-around - 每个项目两侧的间隔相等。所以，项目之间的间隔比项目与容器边框的间隔大一倍。
- space-between - 项目与项目的间隔相等，项目与容器边框之间没有间隔。
- space-evenly - 项目与项目的间隔相等，项目与容器边框之间也是同样长度的间隔。
整个内容区域在容器里面的垂直位置：align-content: start | end | center | stretch | space-around | space-between | space-evenly;
参考教程
Flex 布局教程:语法篇 - 阮一峰的网络日志
CSS Grid 网格布局教程 - 阮一峰的网络日志
4.grid布局示例
5.组合获取数据方式
- 绑定input的id
- 获取数据
- 情况一：不组合
- getValue()
"张三"- getObject()
{"username":"张三"}- 情况二：组合
- getObject()
{"username":"张三"}