cloud-ui.vusion

- name: u-form title: 表单 icon: form description: 具有数据收集、校验和提交功能的表单，包含输入框、选择框、复选框、单选框等元素。 labels: - Form attrs: - name: model title: 数据模型 type: object description: 表单数据模型 advanced: true - name: size title: 表单尺寸 type: string options: - value: small title: 小 - value: normal title: 正常 default: normal description: "" advanced: true - name: rules title: 验证规则 type: object description: 验证规则。简写格式为字符串类型，完整格式或混合格式为数组类型 advanced: true deprecated: true compType: validationRulesSelect bindHide: true group: 主要属性 brifeDoc: "" docDescription: 验证规则。简写格式为字符串类型，完整格式或混合格式为数组类型，详见[验证规则](#验证规则)。 tooltipLink: https://help.lcap.163yun.com/99.%E5%8F%82%E8%80%83/40.%E9%A1%B5%E9%9D%A2IDE/30.%E9%A1%B5%E9%9D%A2%E7%BB%84%E4%BB%B6/05.PC%E9%A1%B5%E9%9D%A2%E5%9F%BA%E7%A1%80%E7%BB%84%E4%BB%B6/06.%E8%A1%A8%E5%8D%95/121.%E8%A1%A8%E5%8D%95.html - name: layout title: 表单布局 type: string options: - value: inline title: 行内展示 - value: block title: 块级展示，宽度会充满父元素 - value: inline-flex title: 栅格展示，可设置列数 default: block description: "" toggleclear: - repeat toggleupdate: - value: inline-flex updateData: repeat: 1 group: 主要属性 brifeDoc: "" docDescription: 更改表单的布局方式。行内展示，标签与表单项在一行展示。块级展示，宽度会充满父元素。栅格展示，可设置列数。 tooltipLink: "" - name: repeat title: 列数 type: number display: number default: 1 description: 整个表单的划分列数 min: 1 dependency: - layout: inline-flex - "!repeat": 1 group: 主要属性 brifeDoc: "" docDescription: 整个表单的划分列数，此项需要设置表单布局为“栅格展示”。 tooltipLink: "" - name: label-layout title: 标签布局 type: string options: - value: inline title: 行内展示 - value: block title: 块级展示，标签与表单项分行展示 default: inline description: "" group: 主要属性 brifeDoc: "" docDescription: "设置标签布局方式。行内展示；块级展示，标签与单项分行展示- " tooltipLink: "" - name: label-ellipsis title: 标签过长省略 type: boolean default: false description: 文字过长是否省略显示。默认文字超出时会换行。 group: 主要属性 brifeDoc: "" docDescription: 文字过长是否省略显示，默认文字超出时会换行。 tooltipLink: "" - name: collapsible title: 可折叠 type: boolean default: false description: 设置是否可以展开/折叠 group: 交互属性 brifeDoc: "" docDescription: 分组是否可以折叠。 tooltipLink: "" - name: accordion title: 手风琴模式 type: boolean default: false description: 设置是否每次只展开一个 group: 交互属性 brifeDoc: "" docDescription: 是否每次只会展开一个分组。 tooltipLink: "" - name: expand-trigger title: 展开触发方式 type: string options: - value: click title: 整行点击均可触发 - value: click-expander title: 仅点击小箭头时触发 default: click description: 展开/折叠操作的触发方式 group: 交互属性 brifeDoc: "" docDescription: |- 展开/折叠的触发方式。 - 整行点击均可触发。 - 仅点击小箭头时触发。 tooltipLink: "" - name: gap-width title: 列间隔 type: string options: - value: none title: 无 - value: small title: 小 - value: normal title: 正常 - value: large title: 大 default: normal description: 设置表单列间隔大小 dependency: - layout: inline group: 样式属性 brifeDoc: "" docDescription: 设置表单项间隔大小。支持无、小、正常、大四个级别，此项需要设置表单布局为“行内展示”。 tooltipLink: "" - name: gap-height title: 行间隔 type: string options: - value: none title: 无 - value: small title: 小 - value: normal title: 正常 - value: large title: 大 default: normal description: 设置表单行间隔大小 group: 样式属性 brifeDoc: "" docDescription: 设置表单行间隔大小。支持无、小、正常、大四个级别。 tooltipLink: "" - name: label-size title: 标签宽度 type: string options: - value: mini title: 迷你 - value: small title: 小 - value: normal title: 正常 - value: large title: 大 default: normal description: "" dependency: - label-layout: inline group: 样式属性 brifeDoc: "" docDescription: 设置标签宽度。支持迷你、小、正常、大四个级别。 tooltipLink: "" computed: - name: touched title: 触碰 type: boolean description: 用户是否触碰 - name: dirty title: 修改值 type: boolean description: 用户是否修改值 - name: valid title: 验证通过 type: boolean description: 验证是否通过 - name: firstError title: 错误消息 type: string description: 第一个错误提示消息 slots: - concept: Slot name: default description: 插入`<u-form-item>`子组件。 empty-background: add-sub-large support: - name: u-form-group title: 表单分组 snippet: '<u-form-group><template #title><u-text text="分组"></u-text></template><u-form-item><template #label><u-text text="表单项"></u-text></template></u-form-item></u-form-group>' - name: u-form-item title: 表单项 snippet: '<u-form-item><template #label><u-text text="表单项"></u-text></template></u-form-item>' events: - name: validate title: 验证后 description: 验证时触发 params: - name: $event type: object description: 自定义事件对象 schema: $ref: "#/systemTypes/ValidateEvent" - name: $event.trigger type: string description: 本次验证的触发方式 - name: $event.valid type: boolean description: 验证是否通过 - name: $event.touched type: boolean description: 用户是否触碰 - name: $event.dirty type: boolean description: 用户是否修改值 - name: $event.firstError type: string description: 第一个错误提示消息 - name: senderVM type: UValidator description: 发送事件实例 methods: - name: validate description: 手动验证。 params: - name: trigger type: string default: submit description: 触发方式，可选值：`submit`、`blur`和`input`之一，或者它们的任意组合。 - name: muted type: boolean default: false description: 是否验证后无提示 - name: validateItem description: 验证表单中的某一项，已废弃。表单中的项是嵌套的，用 name 层级较深，而且可能有重名。 params: - name: name type: string description: 表单项的 name - name: trigger type: string default: submit description: 触发方式，可选值：`submit`、`blur`和`input`之一，或者它们的任意组合。 - name: muted type: boolean default: false description: 是否验证后无提示 - name: u-form-item title: 表单项 attrs: - name: name title: 字段名称 type: string description: 表单项名称。已废弃 advanced: true deprecated: true - name: label title: 标签名 type: string description: 用于左侧显示，同时用于提示消息的合成 advanced: true - name: muted title: 验证是否静默 type: string options: - value: message title: 只静默消息提示 - value: all title: 同时静默消息提示和红框提示 - value: none title: 不作处理 default: none description: 验证是否静默 advanced: true - name: placement title: 提示信息位置 type: string options: - value: right title: 提示信息在右侧显示 - value: bottom title: 提示信息在底部显示 default: right description: 改变提示信息显示位置 advanced: true - name: ignore-rules title: 忽略验证规则 type: boolean default: false description: 忽略验证规则。已废弃，同`ignore-validation` advanced: true deprecated: true - name: validating-options title: 验证辅助对象 type: object description: 验证辅助对象。在 Rule 的 `validate` 方法中使用 advanced: true - name: validating-value title: 修改验证值 type: any description: 临时修改验证值 advanced: true - name: validating-process title: 验证前预处理 type: Function description: 验证前对值进行预处理 advanced: true - name: span title: 占据数 type: string default: 1 description: 列跨越的格数 group: 主要属性 brifeDoc: "" docDescription: 列跨越的格数。 tooltipLink: "" - name: label-layout title: 标签布局 type: string options: - value: inline title: 行内展示 - value: block title: 块级展示，标签与表单项分行展示 default: inline description: "" group: 主要属性 brifeDoc: "" docDescription: 设置标签布局方式，行内展示、块级展示，标签与表单项分行展示 tooltipLink: "" - name: label-ellipsis title: 标签过长省略 type: boolean default: false description: 文字过长是否省略显示。默认文字超出时会换行。 group: 主要属性 brifeDoc: "" docDescription: 文字过长是否省略显示，默认文字超出时会换行。 tooltipLink: "" - name: required title: 必填标记 type: boolean default: false description: 是否必填。仅显示样式，如果要验证必填项，需要在`rules`中添加必填规则。 group: 主要属性 brifeDoc: "" docDescription: 是否必填。仅显示样式，如果要验证必填项，需要在rules中添加必填规则。 tooltipLink: "" - name: required-position title: 必填标记位置 type: string options: - value: left title: 文本左侧 - value: right title: 文本右侧 default: right group: 主要属性 dependency: - required: true - name: message title: 释义提示 type: string description: 鼠标悬浮标签后的图标显示释义提示信息 group: 主要属性 brifeDoc: "" docDescription: 默认提示消息。 tooltipLink: "" - name: description title: 辅助文本 type: string description: 辅助说明的文本信息 group: 主要属性 brifeDoc: "" docDescription: 添加描述内容。 tooltipLink: "" - name: layout title: 标签纵轴对齐 type: string options: - value: block title: 顶对齐 - value: center title: 居中对齐 - value: end title: 尾对齐 default: center description: 标签与表单元素的纵轴对齐方式，默认为顶对齐 group: 主要属性 docDescription: 标签与表单元素的纵轴对齐方式，默认为顶对齐。 tooltipLink: "" - name: rules title: 验证规则 type: string | Array description: 验证规则。简写格式为字符串类型，完整格式或混合格式为数组类型 compType: validationRulesSelect bindHide: true group: 主要属性 brifeDoc: "" docDescription: 验证规则。简写格式为字符串类型，完整格式或混合格式为数组类型，详见[验证规则](#验证规则)。 tooltipLink: "" - name: ignore-validation title: 忽略验证 type: boolean default: false description: "" group: 主要属性 brifeDoc: "" docDescription: 设置是否忽略验证。 tooltipLink: "" - name: field-size title: 字段大小 type: string options: - value: mini title: 迷你 - value: small title: 小 - value: normal title: 正常 - value: large title: 大 default: normal description: 单独设置表单项的内容大小 group: 样式属性 brifeDoc: "" docDescription: 单独设置表单项的内容大小。 tooltipLink: "" - name: label-size title: 表单项标题宽度 type: string options: - value: mini title: 迷你 - value: small title: 小 - value: normal title: 正常 - value: large title: 大 default: normal description: "" group: 样式属性 brifeDoc: "" docDescription: 单独设置表单项的标签宽度大小。支持迷你、小、正常、大四个级别。 tooltipLink: "" slots: - concept: Slot name: default title: 默认 description: 插入文本或 HTML。 - concept: Slot name: label title: 标签自定义 description: 插入自定义标签，代替`label`属性。 advanced: true quick-add: never - concept: Slot name: description title: 描述自定义 description: 插入自定义描述内容，代替`description`属性。 advanced: true quick-add: never - concept: Slot name: extra title: 附加内容 description: 自定义标签右侧额外内容。 advanced: true quick-add: never events: - name: validate title: 验证后 description: 对于第一个 Field 或者所有子 UValidator： params: - name: $event.valid type: boolean description: 验证是否通过 - name: $event.touched type: boolean description: 用户是否触碰 - name: $event.dirty type: boolean description: 用户是否修改值 - name: $event.firstError type: string description: 第一个错误提示消息 - name: senderVM type: UValidator description: 发送事件实例 methods: - name: validate description: 验证此表单项。 params: - name: trigger type: string default: submit description: 触发方式，可选值：`submit`、`blur`和`input`之一，或者它们的任意组合。 - name: muted type: boolean default: false description: 是否验证后无提示 description: 表单项 - name: u-form-group title: 表单分组 attrs: - name: title title: 标题 type: string description: "" group: 主要属性 brifeDoc: "" docDescription: 显示的标题。 tooltipLink: "" - name: repeat title: 列数 type: number default: 1 description: 整个表单的划分列数 group: 主要属性 brifeDoc: "" docDescription: 整个表单的划分列数。 tooltipLink: "" - name: label-layout title: 标签布局 type: string options: - value: inline title: 行内展示 - value: block title: 块级展示，标签与表单项分行展示 default: inline description: "" group: 主要属性 brifeDoc: "" docDescription: 设置标签布局方式。行内展示、块级展示，标签与表单项分行展示。 tooltipLink: "" - name: label-ellipsis title: 标签过长省略 type: boolean default: false description: 文字过长是否省略显示。默认文字超出时会换行。 group: 主要属性 brifeDoc: "" docDescription: 文字过长是否省略显示。默认文字超出时会换行。 tooltipLink: "" - name: collapsible title: 可折叠 type: boolean default: false description: 设置是否可以展开/折叠 group: 交互属性 brifeDoc: "" docDescription: 分组是否可以折叠。 tooltipLink: "" - name: expanded title: 展开状态 type: boolean sync: true default: false description: 展开状态分为“True(展开)/False(折叠)”，默认为“展开” group: 状态属性 brifeDoc: "" docDescription: 绑定展开/折叠状态的值 tooltipLink: "" - name: disabled title: 禁用 type: boolean default: false description: 置灰显示，且禁止展开/折叠操作 group: 状态属性 brifeDoc: "" docDescription: 置灰显示，且禁止任何交互（焦点、点击、选择、输入等） tooltipLink: "" slots: - concept: Slot name: default description: 插入`<u-form-item>`或`<u-form-divider>`子组件。 support: - name: u-form-item title: 表单项 snippet: '<u-form-item><template #label><u-text text="表单项"></u-text></template></u-form-item>' - concept: Slot name: title description: 自定义标题文本。 - concept: Slot name: extra description: 在右侧可以附加内容。 events: - name: before-toggle title: 展开折叠前 description: 展开/折叠此分组前触发 advanced: true params: - name: $event type: object description: 自定义事件对象 schema: $ref: "#/systemTypes/CollapseEvent" - name: $event.expanded type: boolean description: 展开/折叠状态 - name: $event.groupVM type: UFormGroup description: 分组组件 - name: $event.preventDefault type: Function description: 阻止展开/折叠流程 - name: senderVM type: Vue description: 发送事件实例 - name: toggle title: 展开折叠后 description: 展开/折叠某分组时触发 params: - name: $event type: object description: 自定义事件对象 schema: $ref: "#/systemTypes/CollapseEvent" - name: $event.expanded type: boolean description: 展开/折叠状态 - name: $event.groupVM type: UFormGroup description: 分组组件 - name: senderVM type: Vue description: 发送事件实例 description: 展开折叠前