@lcap/nasl

[ { "group": "Layout", "name": "u-linear-layout", "alias": "线性布局", "title": "线性布局", "concept": "ViewComponentDeclaration", "kebabName": "u-linear-layout", "description": "内部元素按照一定的规则布局", "icon": "linear-layout", "tsTypeParams": "", "props": [ { "concept": "PropDeclaration", "group": "主要属性", "bindHide": true, "tabKind": "style", "setter": { "concept": "CapsulesSetter", "options": [ { "title": "行内", "icon": "layout-inline-block", "tooltip": "内联布局", "value": "inline" }, { "title": "块级", "icon": "layout-block", "tooltip": "块级布局", "value": "block" }, { "title": "弹性", "icon": "layout-flex", "tooltip": "弹性布局", "value": "flex" } ] }, "name": "mode", "title": "布局模式", "tsType": "'inline' | 'block' | 'flex'", "defaultValue": { "concept": "DefaultValue", "expression": { "concept": "StringLiteral", "value": "block" }, "playground": [] }, "tooltipLink": "http://help.lcap.163yun.com/1.%E5%BC%80%E5%8F%91%E5%BA%94%E7%94%A8/2.%E9%A1%B5%E9%9D%A2/05.PC%E9%A1%B5%E9%9D%A2%E5%9F%BA%E7%A1%80%E7%BB%84%E4%BB%B6/01.%E5%B8%83%E5%B1%80/020.%E7%BA%BF%E6%80%A7%E5%B8%83%E5%B1%80.html", "docDescription": "内联布局：将当前元素修改为内联布局模式，各个内联布局模式的元素将默认排布在同一行中，若空间不足以排布下一个内联布局元素，则该元素将会换行。\n块级布局：将当前元素修改为块级布局模式，各个块级布局模式的元素之前和之后均会换行。\n弹性布局：在弹性布局模式中，子元素可以在任何方向上排布，也可以“弹性伸缩”其尺寸，既可以增加尺寸以填满未使用的空间，也可以收缩尺寸以避免溢出父元素。", "onChange": [ { "clear": ["justify", "alignment", "wrap", "layout"] } ], "tsOnChange": "[{\"clear\":[\"justify\",\"alignment\",\"wrap\",\"layout\"]}]", "prop": "mode" }, { "concept": "PropDeclaration", "group": "主要属性", "bindHide": true, "tabKind": "style", "setter": { "concept": "CapsulesSetter", "options": [ { "title": "横向排列", "icon": "flex-horizontal", "tooltip": "横向", "value": "horizontal" }, { "title": "纵向排列", "icon": "flex-vertical", "tooltip": "纵向", "value": "vertical" } ] }, "name": "direction", "title": "主轴方向", "tsType": "'horizontal' | 'vertical'", "defaultValue": { "concept": "DefaultValue", "expression": { "concept": "StringLiteral", "value": "horizontal" }, "playground": [] }, "docDescription": "横向：内部子元素进行横向排布，建议内部子元素使用行内布局。\n纵向：内部子元素进行纵向排布，建议内部子元素使用块级布局。", "onChange": [ { "clear": ["justify", "alignment"] } ], "tsOnChange": "[{\"clear\":[\"justify\",\"alignment\"]}]", "prop": "direction" }, { "concept": "PropDeclaration", "group": "主要属性", "bindHide": true, "tabKind": "style", "setter": { "concept": "CapsulesSetter", "options": [ { "title": "左对齐", "icon": "horizontal-justify-start", "tooltip": "左对齐", "value": "start" }, { "title": "居中对齐", "icon": "horizontal-justify-center", "tooltip": "居中对齐", "value": "center" }, { "title": "右对齐", "icon": "horizontal-justify-end", "tooltip": "右对齐", "value": "end" }, { "title": "平均分布(两端不留空)", "icon": "horizontal-justify-space-between", "tooltip": "平均分布(两端不留空)", "if": "_ => _.mode === 'flex' || _.direction === 'horizontal'", "tsIf": "_ => _.mode === 'flex' || _.direction === 'horizontal'", "value": "space-between" }, { "title": "平均分布", "icon": "horizontal-justify-space-around", "tooltip": "平均分布", "if": "_ => _.mode === 'flex'", "tsIf": "_ => _.mode === 'flex'", "value": "space-around" } ] }, "name": "justify", "title": "横轴对齐", "tsType": "'start' | 'center' | 'end' | 'space-between' | 'space-around'", "defaultValue": { "concept": "DefaultValue", "expression": { "concept": "StringLiteral", "value": "start" }, "playground": [] }, "docDescription": "主轴方向为横向时：支持左对齐、居中对齐、右对齐、平均分布（两端不留空）、平均分布，其中平均分布仅在弹性布局模式下展示。\n主轴方向为纵向时：支持左对齐、居中对齐、右对齐、占满容器宽度，其中占满容器宽度仅在弹性布局模式下展示。", "if": "_ => _.direction === 'horizontal' || _.mode === 'inline' && _.direction === 'vertical' || _.mode === 'block' && _.direction === 'vertical'", "onChange": [ { "update": { "gap": "normal" }, "if": "_ => _ === 'space-between'" }, { "update": { "gap": "normal" }, "if": "_ => _ === 'space-around'" } ], "tsIf": "_ => _.direction === 'horizontal' || _.mode === 'inline' && _.direction === 'vertical' || _.mode === 'block' && _.direction === 'vertical'", "tsOnChange": "[{\"update\":{\"gap\":\"normal\"},\"if\":\"_ => _ === 'space-between'\"},{\"update\":{\"gap\":\"normal\"},\"if\":\"_ => _ === 'space-around'\"}]", "prop": "justify" }, { "concept": "PropDeclaration", "group": "主要属性", "bindHide": true, "tabKind": "style", "setter": { "concept": "CapsulesSetter", "options": [ { "title": "顶对齐", "icon": "horizontal-alignment-start", "tooltip": "顶对齐", "value": "start" }, { "title": "垂直居中", "icon": "horizontal-alignment-center", "tooltip": "垂直居中", "value": "center" }, { "title": "底对齐", "icon": "horizontal-alignment-end", "tooltip": "底对齐", "value": "end" }, { "title": "行内文字基线对齐", "icon": "horizontal-alignment-baseline", "tooltip": "行内文字基线对齐", "value": "baseline" }, { "title": "占满容器高度", "icon": "horizontal-alignment-stretch", "tooltip": "占满容器高度", "value": "stretch" } ] }, "name": "alignment", "title": "纵轴对齐", "tsType": "'start' | 'center' | 'end' | 'baseline' | 'stretch'", "defaultValue": { "concept": "DefaultValue", "expression": { "concept": "StringLiteral", "value": "stretch" }, "playground": [] }, "docDescription": "主轴方向为横向时：支持顶对齐、垂直居中、底对齐、行内文字基线对齐、占满容器高度。\n主轴方向为纵向时：支持顶对齐、垂直居中、底对齐、平均分布（两端不留空）、平均分布。", "if": "_ => _.mode === 'flex' && _.direction === 'horizontal'", "tsIf": "_ => _.mode === 'flex' && _.direction === 'horizontal'", "prop": "alignment" }, { "concept": "PropDeclaration", "group": "主要属性", "bindHide": true, "tabKind": "style", "setter": { "concept": "CapsulesSetter", "options": [ { "title": "左对齐", "icon": "vertical-alignment-start", "tooltip": "左对齐", "value": "start" }, { "title": "居中对齐", "icon": "vertical-alignment-center", "tooltip": "居中对齐", "value": "center" }, { "title": "右对齐", "icon": "vertical-alignment-end", "tooltip": "右对齐", "value": "end" }, { "title": "拉伸子元素充满整个父元素空间", "icon": "vertical-alignment-stretch", "tooltip": "占满容器宽度", "value": "stretch" } ] }, "name": "alignment", "title": "纵轴对齐", "tsType": "'start' | 'center' | 'end' | 'stretch'", "defaultValue": { "concept": "DefaultValue", "expression": { "concept": "StringLiteral", "value": "stretch" }, "playground": [] }, "docDescription": "主轴方向为横向时：支持顶对齐、垂直居中、底对齐、行内文字基线对齐、占满容器高度。\n主轴方向为纵向时：支持顶对齐、垂直居中、底对齐、平均分布（两端不留空）、平均分布。", "if": "_ => _.mode === 'flex' && _.direction === 'vertical'", "tsIf": "_ => _.mode === 'flex' && _.direction === 'vertical'", "prop": "alignment" }, { "concept": "PropDeclaration", "group": "主要属性", "bindHide": true, "tabKind": "style", "setter": { "concept": "CapsulesSetter", "options": [ { "title": "顶对齐", "icon": "vertical-justify-start", "tooltip": "顶对齐", "value": "start" }, { "title": "垂直居中", "icon": "vertical-justify-center", "tooltip": "垂直居中", "value": "center" }, { "title": "底对齐", "icon": "vertical-justify-end", "tooltip": "底对齐", "value": "end" }, { "title": "平均分布(两端不留空)", "icon": "vertical-justify-space-between", "tooltip": "平均分布(两端不留空)", "value": "space-between" }, { "title": "平均分布", "icon": "vertical-justify-space-around", "tooltip": "平均分布", "value": "space-around" } ] }, "name": "justify", "title": "横轴对齐", "tsType": "'start' | 'center' | 'end' | 'space-between' | 'space-around'", "defaultValue": { "concept": "DefaultValue", "expression": { "concept": "StringLiteral", "value": "start" }, "playground": [] }, "docDescription": "主轴方向为横向时：支持左对齐、居中对齐、右对齐、平均分布（两端不留空）、平均分布，其中平均分布仅在弹性布局模式下展示。\n主轴方向为纵向时：支持左对齐、居中对齐、右对齐、占满容器宽度，其中占满容器宽度仅在弹性布局模式下展示。", "if": "_ => _.mode === 'flex' && _.direction === 'vertical'", "onChange": [ { "update": { "gap": "normal" }, "if": "_ => _ === 'space-between'" }, { "update": { "gap": "normal" }, "if": "_ => _ === 'space-around'" } ], "tsIf": "_ => _.mode === 'flex' && _.direction === 'vertical'", "tsOnChange": "[{\"update\":{\"gap\":\"normal\"},\"if\":\"_ => _ === 'space-between'\"},{\"update\":{\"gap\":\"normal\"},\"if\":\"_ => _ === 'space-around'\"}]", "prop": "justify" }, { "concept": "PropDeclaration", "group": "主要属性", "tabKind": "style", "setter": { "concept": "EnumSelectSetter", "options": [ { "title": "子元素默认布局", "value": "none" }, { "title": "子元素行内布局", "value": "inline" }, { "title": "子元素块级布局", "value": "block" } ] }, "name": "layout", "title": "子元素展示方式", "tsType": "'none' | 'inline' | 'block'", "defaultValue": { "concept": "DefaultValue", "expression": { "concept": "StringLiteral", "value": "none" }, "playground": [] }, "description": "子元素行内展示或块级换行展示", "docDescription": "布局内各个组件的布局方式，支持默认、行内和块级三种布局方式。", "if": "_ => _.mode === 'inline' || _.mode === 'block'", "tsIf": "_ => _.mode === 'inline' || _.mode === 'block'", "prop": "layout" }, { "concept": "PropDeclaration", "group": "主要属性", "tabKind": "style", "setter": { "concept": "SwitchSetter" }, "name": "wrap", "title": "换行", "tsType": "nasl.core.Boolean", "defaultValue": { "concept": "DefaultValue", "expression": { "concept": "BooleanLiteral", "value": "true" }, "playground": [] }, "description": "设置弹性布局下子元素总宽度超出父级时子元素是否换行展示", "docDescription": "支持控制弹性布局模式下，子元素总宽度超过父级时是否换行展示，默认开启。", "if": "_ => _.mode === 'flex'", "tsIf": "_ => _.mode === 'flex'", "prop": "wrap" }, { "concept": "PropDeclaration", "group": "状态属性", "tabKind": "property", "setter": { "concept": "IconSetter" }, "name": "loadingIcon", "title": "加载中图标", "tsType": "nasl.core.String", "defaultValue": { "concept": "DefaultValue", "expression": { "concept": "StringLiteral", "value": "loading" }, "playground": [] }, "description": "加载中状态显示的图标", "docDescription": "支持从图标库选择图标或上传自定义图标。", "prop": "loadingIcon" }, { "concept": "PropDeclaration", "group": "状态属性", "tabKind": "property", "setter": { "concept": "SwitchSetter" }, "name": "loadingIconRotate", "title": "加载中图标旋转", "tsType": "nasl.core.Boolean", "defaultValue": { "concept": "DefaultValue", "expression": { "concept": "BooleanLiteral", "value": "true" }, "playground": [] }, "description": "设置加载中图标是否旋转，默认开启。", "docDescription": "支持控制加载中图标是否旋转，默认开启。", "prop": "loadingIconRotate" }, { "concept": "PropDeclaration", "group": "状态属性", "tabKind": "property", "name": "loadingText", "title": "加载中文案", "tsType": "nasl.core.String", "defaultValue": { "concept": "DefaultValue", "expression": { "concept": "StringLiteral", "value": "" }, "playground": [] }, "description": "加载中状态显示的提示文案", "docDescription": "支持编辑组件加载中情况显示文案。", "implicitToString": true, "prop": "loadingText" }, { "concept": "PropDeclaration", "group": "样式属性", "tabKind": "style", "setter": { "concept": "EnumSelectSetter", "options": [ { "title": "收缩", "value": "shrink" }, { "title": "无", "value": "none" }, { "title": "小", "value": "small" }, { "title": "正常", "value": "normal" }, { "title": "大", "value": "large" } ] }, "name": "gap", "title": "内容间隙", "tsType": "'shrink' | 'none' | 'small' | 'normal' | 'large'", "defaultValue": { "concept": "DefaultValue", "expression": { "concept": "StringLiteral", "value": "normal" }, "playground": [] }, "description": "内容块间隙大小", "docDescription": "布局内各个组件之间的间隔，通常有收缩、无、小、正常、大，默认为正常。", "if": "_ => _.justify !== 'space-between' && _.justify !== 'space-around'", "tsIf": "_ => _.justify !== 'space-between' && _.justify !== 'space-around'", "prop": "gap" } ], "readableProps": [], "events": [ { "concept": "EventDeclaration", "name": "click", "title": "点击", "tsType": "(event: {\n altKey: nasl.core.Boolean;\n button: nasl.core.Integer;\n clientX: nasl.core.Integer;\n clientY: nasl.core.Integer;\n ctrlKey: nasl.core.Boolean;\n metaKey: nasl.core.Boolean;\n movementX: nasl.core.Integer;\n movementY: nasl.core.Integer;\n offsetX: nasl.core.Integer;\n offsetY: nasl.core.Integer;\n pageX: nasl.core.Integer;\n pageY: nasl.core.Integer;\n screenX: nasl.core.Integer;\n screenY: nasl.core.Integer;\n which: nasl.core.Integer;\n}) => any", "description": "在元素上按下并释放任意鼠标按钮时触发。" }, { "concept": "EventDeclaration", "name": "dblclick", "title": "双击", "tsType": "(event: {\n altKey: nasl.core.Boolean;\n button: nasl.core.Integer;\n clientX: nasl.core.Integer;\n clientY: nasl.core.Integer;\n ctrlKey: nasl.core.Boolean;\n metaKey: nasl.core.Boolean;\n movementX: nasl.core.Integer;\n movementY: nasl.core.Integer;\n offsetX: nasl.core.Integer;\n offsetY: nasl.core.Integer;\n pageX: nasl.core.Integer;\n pageY: nasl.core.Integer;\n screenX: nasl.core.Integer;\n screenY: nasl.core.Integer;\n which: nasl.core.Integer;\n}) => any", "description": "在元素上双击鼠标按钮时触发。" }, { "concept": "EventDeclaration", "name": "contextmenu", "title": "右键点击", "tsType": "(event: {\n altKey: nasl.core.Boolean;\n button: nasl.core.Integer;\n clientX: nasl.core.Integer;\n clientY: nasl.core.Integer;\n ctrlKey: nasl.core.Boolean;\n metaKey: nasl.core.Boolean;\n movementX: nasl.core.Integer;\n movementY: nasl.core.Integer;\n offsetX: nasl.core.Integer;\n offsetY: nasl.core.Integer;\n pageX: nasl.core.Integer;\n pageY: nasl.core.Integer;\n screenX: nasl.core.Integer;\n screenY: nasl.core.Integer;\n which: nasl.core.Integer;\n}) => any", "description": "在右键菜单显示前触发。" }, { "concept": "EventDeclaration", "name": "mousedown", "title": "鼠标按下", "tsType": "(event: {\n altKey: nasl.core.Boolean;\n button: nasl.core.Integer;\n clientX: nasl.core.Integer;\n clientY: nasl.core.Integer;\n ctrlKey: nasl.core.Boolean;\n metaKey: nasl.core.Boolean;\n movementX: nasl.core.Integer;\n movementY: nasl.core.Integer;\n offsetX: nasl.core.Integer;\n offsetY: nasl.core.Integer;\n pageX: nasl.core.Integer;\n pageY: nasl.core.Integer;\n screenX: nasl.core.Integer;\n screenY: nasl.core.Integer;\n which: nasl.core.Integer;\n}) => any", "description": "在元素上按下任意鼠标按钮时触发。" }, { "concept": "EventDeclaration", "name": "mouseup", "title": "鼠标释放", "tsType": "(event: {\n altKey: nasl.core.Boolean;\n button: nasl.core.Integer;\n clientX: nasl.core.Integer;\n clientY: nasl.core.Integer;\n ctrlKey: nasl.core.Boolean;\n metaKey: nasl.core.Boolean;\n movementX: nasl.core.Integer;\n movementY: nasl.core.Integer;\n offsetX: nasl.core.Integer;\n offsetY: nasl.core.Integer;\n pageX: nasl.core.Integer;\n pageY: nasl.core.Integer;\n screenX: nasl.core.Integer;\n screenY: nasl.core.Integer;\n which: nasl.core.Integer;\n}) => any", "description": "在元素上释放任意鼠标按钮时触发。" }, { "concept": "EventDeclaration", "name": "mouseenter", "title": "鼠标移入", "tsType": "(event: {\n altKey: nasl.core.Boolean;\n button: nasl.core.Integer;\n clientX: nasl.core.Integer;\n clientY: nasl.core.Integer;\n ctrlKey: nasl.core.Boolean;\n metaKey: nasl.core.Boolean;\n movementX: nasl.core.Integer;\n movementY: nasl.core.Integer;\n offsetX: nasl.core.Integer;\n offsetY: nasl.core.Integer;\n pageX: nasl.core.Integer;\n pageY: nasl.core.Integer;\n screenX: nasl.core.Integer;\n screenY: nasl.core.Integer;\n which: nasl.core.Integer;\n}) => any", "description": "鼠标移入元素时触发。" }, { "concept": "EventDeclaration", "name": "mouseleave", "title": "鼠标移出", "tsType": "(event: {\n altKey: nasl.core.Boolean;\n button: nasl.core.Integer;\n clientX: nasl.core.Integer;\n clientY: nasl.core.Integer;\n ctrlKey: nasl.core.Boolean;\n metaKey: nasl.core.Boolean;\n movementX: nasl.core.Integer;\n movementY: nasl.core.Integer;\n offsetX: nasl.core.Integer;\n offsetY: nasl.core.Integer;\n pageX: nasl.core.Integer;\n pageY: nasl.core.Integer;\n screenX: nasl.core.Integer;\n screenY: nasl.core.Integer;\n which: nasl.core.Integer;\n}) => any", "description": "鼠标移出元素时触发。" }, { "concept": "EventDeclaration", "name": "scroll", "title": "滚动时", "tsType": "(event: {\n scrollTop: nasl.core.Integer;\n scrollLeft: nasl.core.Integer;\n scrollWidth: nasl.core.Integer;\n scrollHeight: nasl.core.Integer;\n clientWidth: nasl.core.Integer;\n clientHeight: nasl.core.Integer;\n}) => any", "description": "滚动时触发" } ], "methods": [ { "concept": "LogicDeclaration", "description": "打开加载中", "params": [], "returns": [], "name": "openLoading", "title": "打开加载中" }, { "concept": "LogicDeclaration", "description": "关闭加载中", "params": [], "returns": [], "name": "closeLoading", "title": "关闭加载中" } ], "slots": [ { "concept": "SlotDeclaration", "name": "default", "title": "默认", "tsType": "() => Array<ViewComponent>", "params": [], "description": "内容" } ], "children": [], "blocks": [ { "concept": "ViewBlockWithImage", "title": "单行排布", "description": "", "code": "<template>\n<u-linear-layout direction=\"horizontal\" :wrap=\"true\">\n</u-linear-layout>\n</template>", "screenshot": "https://static-vusion.163yun.com/packages/@lcap/pc-ui@1.0.0/src/components/u-linear-layout.vue/screenshots/0.png", "drawing": "https://static-vusion.163yun.com/packages/@lcap/pc-ui@1.0.0/src/components/u-linear-layout.vue/drawings/0.svg" }, { "concept": "ViewBlockWithImage", "title": "多行排布", "description": "", "code": "<template>\n<u-linear-layout direction=\"vertical\" :wrap=\"true\">\n<u-linear-layout :wrap=\"true\">\n</u-linear-layout>\n<u-linear-layout :wrap=\"true\">\n</u-linear-layout>\n</u-linear-layout>\n</template>", "screenshot": "https://static-vusion.163yun.com/packages/@lcap/pc-ui@1.0.0/src/components/u-linear-layout.vue/screenshots/1.png", "drawing": "https://static-vusion.163yun.com/packages/@lcap/pc-ui@1.0.0/src/components/u-linear-layout.vue/drawings/1.svg" }, { "concept": "ViewBlockWithImage", "title": "两端排布", "description": "", "code": "<template>\n<u-linear-layout justify=\"space-between\" :wrap=\"true\">\n<u-linear-layout :wrap=\"true\">\n</u-linear-layout>\n<u-linear-layout :wrap=\"true\">\n</u-linear-layout>\n</u-linear-layout>\n</template>", "screenshot": "https://static-vusion.163yun.com/packages/@lcap/pc-ui@1.0.0/src/components/u-linear-layout.vue/screenshots/2.png", "drawing": "https://static-vusion.163yun.com/packages/@lcap/pc-ui@1.0.0/src/components/u-linear-layout.vue/drawings/2.svg" } ], "themeVariables": [], "ideusage": { "idetype": "container", "containerDirection": "this.getAttribute('direction')?.value === 'vertical' ? 'column' : 'row' ", "expandWhenHesitate": true, "automate": [ { "command": "WRAP_LINEAR_VERTICAL", "useblock": 0, "attribute": { "mode": "flex", "direction": "vertical", "justify": "start", "alignment": "start", "wrap": "false" } }, { "command": "WRAP_LINEAR_HORIZONTAL", "useblock": 0, "attribute": { "mode": "flex", "direction": "horizontal", "justify": "start", "alignment": "start", "wrap": "false" } } ] }, "readablePropsMap": { "_if": { "name": "_if", "prop": "_if", "title": "显示条件" } }, "propsMap": { "mode": { "concept": "PropDeclaration", "group": "主要属性", "bindHide": true, "tabKind": "style", "setter": { "concept": "CapsulesSetter", "options": [ { "title": "行内", "icon": "layout-inline-block", "tooltip": "内联布局", "value": "inline" }, { "title": "块级", "icon": "layout-block", "tooltip": "块级布局", "value": "block" }, { "title": "弹性", "icon": "layout-flex", "tooltip": "弹性布局", "value": "flex" } ] }, "name": "mode", "title": "布局模式", "tsType": "'inline' | 'block' | 'flex'", "defaultValue": { "concept": "DefaultValue", "expression": { "concept": "StringLiteral", "value": "block" }, "playground": [] }, "tooltipLink": "http://help.lcap.163yun.com/1.%E5%BC%80%E5%8F%91%E5%BA%94%E7%94%A8/2.%E9%A1%B5%E9%9D%A2/05.PC%E9%A1%B5%E9%9D%A2%E5%9F%BA%E7%A1%80%E7%BB%84%E4%BB%B6/01.%E5%B8%83%E5%B1%80/020.%E7%BA%BF%E6%80%A7%E5%B8%83%E5%B1%80.html", "docDescription": "内联布局：将当前元素修改为内联布局模式，各个内联布局模式的元素将默认排布在同一行中，若空间不足以排布下一个内联布局元素，则该元素将会换行。\n块级布局：将当前元素修改为块级布局模式，各个块级布局模式的元素之前和之后均会换行。\n弹性布局：在弹性布局模式中，子元素可以在任何方向上排布，也可以“弹性伸缩”其尺寸，既可以增加尺寸以填满未使用的空间，也可以收缩尺寸以避免溢出父元素。", "onChange": [ { "clear": ["justify", "alignment", "wrap", "layout"] } ], "tsOnChange": "[{\"clear\":[\"justify\",\"alignment\",\"wrap\",\"layout\"]}]", "prop": "mode" }, "direction": { "concept": "PropDeclaration", "group": "主要属性", "bindHide": true, "tabKind": "style", "setter": { "concept": "CapsulesSetter", "options": [ { "title": "横向排列", "icon": "flex-horizontal", "tooltip": "横向", "value": "horizontal" }, { "title": "纵向排列", "icon": "flex-vertical", "tooltip": "纵向", "value": "vertical" } ] }, "name": "direction", "title": "主轴方向", "tsType": "'horizontal' | 'vertical'", "defaultValue": { "concept": "DefaultValue", "expression": { "concept": "StringLiteral", "value": "horizontal" }, "playground": [] }, "docDescription": "横向：内部子元素进行横向排布，建议内部子元素使用行内布局。\n纵向：内部子元素进行纵向排布，建议内部子元素使用块级布局。", "onChange": [ { "clear": ["justify", "alignment"] } ], "tsOnChange": "[{\"clear\":[\"justify\",\"alignment\"]}]", "prop": "direction" }, "justify": { "concept": "PropDeclaration", "group": "主要属性", "bindHide": true, "tabKind": "style", "setter": { "concept": "CapsulesSetter", "options": [ { "title": "顶对齐", "icon": "vertical-justify-start", "tooltip": "顶对齐", "value": "start" }, { "title": "垂直居中", "icon": "vertical-justify-center", "tooltip": "垂直居中", "value": "center" }, { "title": "底对齐", "icon": "vertical-justify-end", "tooltip": "底对齐", "value": "end" }, { "title": "平均分布(两端不留空)", "icon": "vertical-justify-space-between", "tooltip": "平均分布(两端不留空)", "value": "space-between" }, { "title": "平均分布", "icon": "vertical-justify-space-around", "tooltip": "平均分布", "value": "space-around" } ] }, "name": "justify", "title": "横轴对齐", "tsType": "'start' | 'center' | 'end' | 'space-between' | 'space-around'", "defaultValue": { "concept": "DefaultValue", "expression": { "concept": "StringLiteral", "value": "start" }, "playground": [] }, "docDescription": "主轴方向为横向时：支持左对齐、居中对齐、右对齐、平均分布（两端不留空）、平均分布，其中平均分布仅在弹性布局模式下展示。\n主轴方向为纵向时：支持左对齐、居中对齐、右对齐、占满容器宽度，其中占满容器宽度仅在弹性布局模式下展示。", "if": "_ => _.mode === 'flex' && _.direction === 'vertical'", "onChange": [ { "update": { "gap": "normal" }, "if": "_ => _ === 'space-between'" }, { "update": { "gap": "normal" }, "if": "_ => _ === 'space-around'" } ], "tsIf": "_ => _.mode === 'flex' && _.direction === 'vertical'", "tsOnChange": "[{\"update\":{\"gap\":\"normal\"},\"if\":\"_ => _ === 'space-between'\"},{\"update\":{\"gap\":\"normal\"},\"if\":\"_ => _ === 'space-around'\"}]", "prop": "justify" }, "alignment": { "concept": "PropDeclaration", "group": "主要属性", "bindHide": true, "tabKind": "style", "setter": { "concept": "CapsulesSetter", "options": [ { "title": "左对齐", "icon": "vertical-alignment-start", "tooltip": "左对齐", "value": "start" }, { "title": "居中对齐", "icon": "vertical-alignment-center", "tooltip": "居中对齐", "value": "center" }, { "title": "右对齐", "icon": "vertical-alignment-end", "tooltip": "右对齐", "value": "end" }, { "title": "拉伸子元素充满整个父元素空间", "icon": "vertical-alignment-stretch", "tooltip": "占满容器宽度", "value": "stretch" } ] }, "name": "alignment", "title": "纵轴对齐", "tsType": "'start' | 'center' | 'end' | 'stretch'", "defaultValue": { "concept": "DefaultValue", "expression": { "concept": "StringLiteral", "value": "stretch" }, "playground": [] }, "docDescription": "主轴方向为横向时：支持顶对齐、垂直居中、底对齐、行内文字基线对齐、占满容器高度。\n主轴方向为纵向时：支持顶对齐、垂直居中、底对齐、平均分布（两端不留空）、平均分布。", "if": "_ => _.mode === 'flex' && _.direction === 'vertical'", "tsIf": "_ => _.mode === 'flex' && _.direction === 'vertical'", "prop": "alignment" }, "layout": { "concept": "PropDeclaration", "group": "主要属性", "tabKind": "style", "setter": { "concept": "EnumSelectSetter", "options": [ { "title": "子元素默认布局", "value": "none" }, { "title": "子元素行内布局", "value": "inline" }, { "title": "子元素块级布局", "value": "block" } ] }, "name": "layout", "title": "子元素展示方式", "tsType": "'none' | 'inline' | 'block'", "defaultValue": { "concept": "DefaultValue", "expression": { "concept": "StringLiteral", "value": "none" }, "playground": [] }, "description": "子元素行内展示或块级换行展示", "docDescription": "布局内各个组件的布局方式，支持默认、行内和块级三种布局方式。", "if": "_ => _.mode === 'inline' || _.mode === 'block'", "tsIf": "_ => _.mode === 'inline' || _.mode === 'block'", "prop": "layout" }, "wrap": { "concept": "PropDeclaration", "group": "主要属性", "tabKind": "style", "setter": { "concept": "SwitchSetter" }, "name": "wrap", "title": "换行", "tsType": "nasl.core.Boolean", "defaultValue": { "concept": "DefaultValue", "expression": { "concept": "BooleanLiteral", "value": "true" }, "playground": [] }, "description": "设置弹性布局下子元素总宽度超出父级时子元素是否换行展示", "docDescription": "支持控制弹性布局模式下，子元素总宽度超过父级时是否换行展示，默认开启。", "if": "_ => _.mode === 'flex'", "tsIf": "_ => _.mode === 'flex'", "prop": "wrap" }, "loadingIcon": { "concept": "PropDeclaration", "group": "状态属性", "tabKind": "property", "setter": { "concept": "IconSetter" }, "name": "loadingIcon", "title": "加载中图标", "tsType": "nasl.core.String", "defaultValue": { "concept": "DefaultValue", "expression": { "concept": "StringLiteral", "value": "loading" }, "playground": [] }, "description": "加载中状态显示的图标", "docDescription": "支持从图标库选择图标或上传自定义图标。", "prop": "loadingIcon" }, "loadingIconRotate": { "concept": "PropDeclaration", "group": "状态属性", "tabKind": "property", "setter": { "concept": "SwitchSetter" }, "name": "loadingIconRotate", "title": "加载中图标旋转", "tsType": "nasl.core.Boolean", "defaultValue": { "concept": "DefaultValue", "expression": { "concept": "BooleanLiteral", "value": "true" }, "playground": [] }, "description": "设置加载中图标是否旋转，默认开启。", "docDescription": "支持控制加载中图标是否旋转，默认开启。", "prop": "loadingIconRotate" }, "loadingText": { "concept": "PropDeclaration", "group": "状态属性", "tabKind": "property", "name": "loadingText", "title": "加载中文案", "tsType": "nasl.core.String", "defaultValue": { "concept": "DefaultValue", "expression": { "concept": "StringLiteral", "value": "" }, "playground": [] }, "description": "加载中状态显示的提示文案", "docDescription": "支持编辑组件加载中情况显示文案。", "implicitToString": true, "prop": "loadingText" }, "gap": { "concept": "PropDeclaration", "group": "样式属性", "tabKind": "style", "setter": { "concept": "EnumSelectSetter", "options": [ { "title": "收缩", "value": "shrink" }, { "title": "无", "value": "none" }, { "title": "小", "value": "small" }, { "title": "正常", "value": "normal" }, { "title": "大", "value": "large" } ] }, "name": "gap", "title": "内容间隙", "tsType": "'shrink' | 'none' | 'small' | 'normal' | 'large'", "defaultValue": { "concept": "DefaultValue", "expression": { "concept": "StringLiteral", "value": "normal" }, "playground": [] }, "description": "内容块间隙大小", "docDescription": "布局内各个组件之间的间隔，通常有收缩、无、小、正常、大，默认为正常。", "if": "_ => _.justify !== 'space-between' && _.justify !== 'space-around'", "tsIf": "_ => _.justify !== 'space-between' && _.justify !== 'space-around'", "prop": "gap" }, "_if": { "name": "_if", "prop": "_if", "title": "显示条件" } }, "componentLevel": "root" }, { "group": "Layout", "name": "u-absolute-layout", "alias": "自由布局", "title": "自由布局", "concept": "ViewComponentDeclaration", "kebabName": "u-absolute-layout", "description": "拖拽内部元素到任意位置", "icon": "absolute-layout", "tsTypeParams": "", "props": [], "readableProps": [], "events": [ { "concept": "EventDeclaration", "name": "click", "title": "点击", "tsType": "(event: {\n altKey: nasl.core.Boolean;\n button: nasl.core.Integer;\n clientX: nasl.core.Integer;\n clientY: nasl.core.Integer;\n ctrlKey: nasl.core.Boolean;\n metaKey: nasl.core.Boolean;\n movementX: nasl.core.Integer;\n movementY: nasl.core.Integer;\n offsetX: nasl.core.Integer;\n offsetY: nasl.core.Integer;\n pageX: nasl.core.Integer;\n pageY: nasl.core.Integer;\n screenX: nasl.core.Integer;\n screenY: nasl.core.Integer;\n which: nasl.core.Integer;\n}) => any", "description": "在元素上按下并释放任意鼠标按钮时触发。" }, { "concept": "EventDeclaration", "name": "dblclick", "title": "双击", "tsType": "(event: {\n altKey: nasl.core.Boolean;\n button: nasl.core.Integer;\n clientX: nasl.core.Integer;\n clientY: nasl.core.Integer;\n ctrlKey: nasl.core.Boolean;\n metaKey: nasl.core.Boolean;\n movementX: nasl.core.Integer;\n movementY: nasl.core.Integer;\n offsetX: nasl.core.Integer;\n offsetY: nasl.core.Integer;\n pageX: nasl.core.Integer;\n pageY: nasl.core.Integer;\n screenX: nasl.core.Integer;\n screenY: nasl.core.Integer;\n which: nasl.core.Integer;\n}) => any", "description": "在元素上双击鼠标按钮时触发。" }, { "concept": "EventDeclaration", "name": "contextmenu", "title": "右键点击", "tsType": "(event: {\n altKey: nasl.core.Boolean;\n button: nasl.core.Integer;\n clientX: nasl.core.Integer;\n clientY: nasl.core.Integer;\n ctrlKey: nasl.core.Boolean;\n metaKey: nasl.core.Boolean;\n movementX: nasl.core.Integer;\n movementY: nasl.core.Integer;\n offsetX: nasl.core.Integer;\n offsetY: nasl.core.Integer;\n pageX: nasl.core.Integer;\n pageY: nasl.core.Integer;\n screenX: nasl.core.Integer;\n screenY: nasl.core.Integer;\n which: nasl.core.Integer;\n}) => any", "description": "在右键菜单显示前触发。" }, { "concept": "EventDeclaration", "name": "mousedown", "title": "鼠标按下", "tsType": "(event: {\n altKey: nasl.core.Boolean;\n button: nasl.core.Integer;\n clientX: nasl.core.Integer;\n clientY: nasl.core.Integer;\n ctrlKey: nasl.core.Boolean;\n metaKey: nasl.core.Boolean;\n movementX: nasl.core.Integer;\n movementY: nasl.core.Integer;\n offsetX: nasl.core.Integer;\n offsetY: nasl.core.Integer;\n pageX: nasl.core.Integer;\n pageY: nasl.core.Integer;\n screenX: nasl.core.Integer;\n screenY: nasl.core.Integer;\n which: nasl.core.Integer;\n}) => any", "description": "在元素上按下任意鼠标按钮时触发。" }, { "concept": "EventDeclaration", "name": "mouseup", "title": "鼠标释放", "tsType": "(event: {\n altKey: nasl.core.Boolean;\n button: nasl.core.Integer;\n clientX: nasl.core.Integer;\n clientY: nasl.core.Integer;\n ctrlKey: nasl.core.Boolean;\n metaKey: nasl.core.Boolean;\n movementX: nasl.core.Integer;\n movementY: nasl.core.Integer;\n offsetX: nasl.core.Integer;\n offsetY: nasl.core.Integer;\n pageX: nasl.core.Integer;\n pageY: nasl.core.Integer;\n screenX: nasl.core.Integer;\n screenY: nasl.core.Integer;\n which: nasl.core.Integer;\n}) => any", "description": "在元素上释放任意鼠标按钮时触发。" }, { "concept": "EventDeclaration", "name": "mouseenter", "title": "鼠标移入", "tsType": "(event: {\n altKey: nasl.core.Boolean;\n button: nasl.core.Integer;\n clientX: nasl.core.Integer;\n clientY: nasl.core.Integer;\n ctrlKey: nasl.core.Boolean;\n metaKey: nasl.core.Boolean;\n movementX: nasl.core.Integer;\n movementY: nasl.core.Integer;\n offsetX: nasl.core.Integer;\n offsetY: nasl.core.Integer;\n pageX: nasl.core.Integer;\n pageY: nasl.core.Integer;\n screenX: nasl.core.Integer;\n screenY: nasl.core.Integer;\n which: nasl.core.Integer;\n}) => any", "description": "鼠标移入元素时触发。" }, { "concept": "EventDeclaration", "name": "mouseleave", "title": "鼠标移出", "tsType": "(event: {\n altKey: nasl.core.Boolean;\n button: nasl.core.Integer;\n clientX: nasl.core.Integer;\n clientY: nasl.core.Integer;\n ctrlKey: nasl.core.Boolean;\n metaKey: nasl.core.Boolean;\n movementX: nasl.core.Integer;\n movementY: nasl.core.Integer;\n offsetX: nasl.core.Integer;\n offsetY: nasl.core.Integer;\n pageX: nasl.core.Integer;\n pageY: nasl.core.Integer;\n screenX: nasl.core.Integer;\n screenY: nasl.core.Integer;\n which: nasl.core.Integer;\n}) => any", "description": "鼠标移出元素时触发。" } ], "methods": [], "slots": [ { "concept": "SlotDeclaration", "name": "default", "title": "undefined", "tsType": "() => Array<ViewComponent>", "params": [], "description": "内容" } ], "children": [], "blocks": [ { "concept": "ViewBlockWithImage", "title": "自由布局", "description": "", "code": "<template>\n<u-absolute-layout>\n</u-absolute-layout>\n</template>", "screenshot": "", "drawing": "" } ], "themeVariables": [], "ideusage": { "idetype": "board", "automate": [ { "command": "WRAP_FREE", "useblock": 0 } ] }, "readablePropsMap": { "_if": { "name": "_if", "prop": "_if", "title": "显示条件" } }, "propsMap": { "_if": { "name": "_if", "prop": "_if", "title": "显示条件" } }, "componentLevel": "root" }, { "group": "Layout", "name": "u-grid-layout", "alias": "栅格布局", "title": "栅格布局", "concept": "ViewComponentDeclaration", "kebabName": "u-grid-layout", "description": "内部元素按照一定的规则布局", "icon": "grid-layout", "tsTypeParams": "", "props": [ { "concept": "PropDeclaration", "group": "样式属性", "tabKind": "property", "setter": { "concept": "EnumSelectSetter", "options": [ { "title": "紧凑（-1）", "value": "compact" }, { "title": "无（0）", "value": "none" }, { "title": "小（8）", "value": "small" }, { "title": "正常（16）", "value": "normal" }, { "title": "大（32）", "value": "large" } ] }, "name": "gap", "title": "行间隔", "tsType": "'compact' | 'none' | 'small' | 'normal' | 'large'", "defaultValue": { "concept": "DefaultValue", "expression": { "concept": "StringLiteral", "value": "normal" }, "playground": [] }, "description": "栅格行之间的间隔", "docDescription": "支持修改栅格行之间的间隔，支持紧凑（-1）、无（0）、小（8）、正常（16）、大（32）共6种间隔模式。", "prop": "gap" } ], "readableProps": [], "events": [ { "concept": "EventDeclaration", "name": "scroll", "title": "滚动时", "tsType": "(event: {\n scrollTop: nasl.core.Integer;\n scrollLeft: nasl.core.Integer;\n scrollWidth: nasl.core.Integer;\n scrollHeight: nasl.core.Integer;\n clientWidth: nasl.core.Integer;\n clientHeight: nasl.core.Integer;\n}) => any", "description": "滚动时触发" } ], "methods": [], "slots": [ { "concept": "SlotDeclaration", "snippets": [ { "title": "插入一行", "code": "<u-grid-layout-row :repeat=\"24\"><u-grid-layout-column :span=\"8\" :wrap=\"true\"></u-grid-layout-column><u-grid-layout-column :span=\"8\" :wrap=\"true\"></u-grid-layout-column><u-grid-layout-column :span=\"8\" :wrap=\"true\"></u-grid-layout-column></u-grid-layout-row>" } ], "name": "default", "title": "undefined", "tsType": "() => Array<UGridLayoutRow>", "params": [], "description": "插入`<u-grid-layout-row>`或`<u-grid-layout-column>`子组件。" } ], "children": [ { "concept": "ViewComponentDeclaration", "group": "", "name": "u-grid-layout-row", "kebabName": "u-grid-layout-row", "title": "栅格行", "description": "内部元素行布局", "icon": "", "tsTypeParams": "", "props": [ { "concept": "PropDeclaration", "group": "主要属性", "bindHide": true, "tabKind": "property", "setter": { "concept": "CapsulesSetter", "options": [ { "title": "左对齐", "icon": "horizontal-justify-start", "tooltip": "左对齐", "value": "start" }, { "title": "居中对齐", "icon": "horizontal-justify-center", "tooltip": "居中对齐", "value": "center" }, { "title": "右对齐", "icon": "horizontal-justify-end", "tooltip": "右对齐", "value": "end" }, { "title": "平均分布(两端不留空)", "icon": "horizontal-justify-space-between", "tooltip": "平均分布(两端不留空)", "value": "space-between" }, { "title": "水平分布-左右留空", "icon": "horizontal-justify-space-around", "tooltip": "平均分布", "value": "space-around" } ] }, "name": "justify", "title": "横轴对齐", "tsType": "'start' | 'center' | 'end' | 'space-between' | 'space-around'", "defaultValue": { "concept": "DefaultValue", "expression": { "concept": "StringLiteral", "value": "start" }, "playground": [] }, "docDescription": "支持左对齐、居中对齐、右对齐、平均分布（两端不留空）、平均分布。", "prop": "justify" }, { "concept": "PropDeclaration", "group": "主要属性", "bindHide": true, "tabKind": "property", "setter": { "concept": "CapsulesSetter", "options": [ { "title": "顶对齐", "icon": "horizontal-alignment-start", "tooltip": "顶对齐", "value": "start" }, { "title": "垂直居中", "icon": "horizontal-alignment-center", "tooltip": "垂直居中", "value": "center" }, { "title": "底对齐", "icon": "horizontal-alignment-end", "tooltip": "底对齐", "value": "end" }, { "title": "行内文字基线对齐", "icon": "horizontal-alignment-baseline", "tooltip": "行内文字基线对齐", "value": "baseline" }, { "title": "占满容器高度", "icon": "horizontal-alignment-stretch", "tooltip": "占满容器高度", "value": "stretch" } ] }, "name": "alignment", "title": "纵轴对齐", "tsType": "'start' | 'center' | 'end' | 'baseline' | 'stretch'", "defaultValue": { "concept": "DefaultValue", "expression": { "concept": "StringLiteral", "value": "stretch" }, "playground": [] }, "docDescription": "支持顶对齐、垂直居中、底对齐、行内文字基线对齐、占满容器高度。", "prop": "alignment" }, { "concept": "PropDeclaration", "group": "主要属性", "tabKind": "property", "setter": { "concept": "NumberInputSetter", "min": 1, "max": 24 }, "name": "repeat", "title": "栅格数", "tsType": "nasl.core.Decimal | nasl.core.Integer", "defaultValue": { "concept": "DefaultValue", "expression": { "concept": "NumericLiteral", "value": "12", "typeAnnotation": { "concept": "TypeAnnotation", "typeKind": "primitive", "typeName": "Integer", "typeNamespace": "nasl.core", "inferred": false, "ruleMap": {} } }, "playground": [] }, "description": "默认24，可设置栅格行大小", "docDescription": "支持设置栅格行大小，默认为24。", "prop": "repeat" }, { "concept": "PropDeclaration", "group": "样式属性", "tabKind": "property", "setter": { "concept": "EnumSelectSetter", "options"