平台已定义的注解
@AttributeEditor(flag?) 属性编辑器注解.标志该类是属性编辑器
flag 与 属性编辑器的关联的助记符.- 参数:
- @param flag 可选参数 属性编辑器的默认构造类的唯一标记.(非空情况下全局唯一.不然会出现唯一性错误) 主要的作用是方便记忆.
- 参数:
@Component(config?: IRegeditComponentConfig | IRegeditComponentConfig[]) 组件注册注解.只有注册了才能使用.
参数:
- @param config [可选]组件在界面设计器内的图标和分组配置
注册组件的组
组的定义一般是放到包的入口文件inde.ts内并通过使用CompomentRegediterService.regeditGroup函数来注册组件import "yh-designer"; import { CompomentRegediterService } from 'yh-designer/dist/services/CompomentRegediterService'; import './business/index'; import './common/index'; import './form/index'; import './list/index'; import './tabbar/index'; import './wechat/index'; CompomentRegediterService.regeditGroup({ name: "移动端", id: "mobile", desc: "移动端组件", visiable: true, sort: 7, expand: true, items: [ { name: "通用组件", id: "mobile-common", desc: "通用组件", sort: 0, expand: true, visiable: true }, { name: "ColorUI组件", id: "ColorUI", desc: "ColorUI组件", visiable: true, expand: true }, { name: "wechat", id: "mobile-wechat", desc: "微信组件", visiable: true, expand: true }, { name: "Vant组件", id: "Vant", desc: "Vant组件", visiable: true, expand: true }, { name: "业务组件", id: "Business", desc: "业务组件", visiable: true, expand: true }, { name: "ElementUI", id: "ElementUI", desc: "ElementUI饿了么组件", visiable: true }, { name: "布局组件", id: "mobile-layout", desc: "布局组件", visiable: true }, { name: "Form组件", id: "mobile-form", desc: "Form组件", visiable: true }, { name: "反馈组件", id: "mobile-feeback", desc: "反馈组件", visiable: true }, { name: "导航组件", id: "mobile-navigation", desc: "导航组件", visiable: true }, { name: "行业组件", id: "mobile-navigation", desc: "行业组件", visiable: true, items: [ { name: "医疗行业", id: "mobile-treatment", desc: "医疗行业", visiable: true }, { name: "教育行业", id: "mobile-education", desc: "教育行业", visiable: true }, { name: "项目行业", id: "mobile-project", desc: "项目行业", visiable: true }, { name: "制造行业", id: "mobile-manufacture", desc: "制造行业", visiable: true }, { name: "电商行业", id: "mobile-ecommerce", desc: "电商行业", visiable: true }, ] }, ] });平台已经注册的组id与描述:
mobile (移动端)
- mobile-common (移动端-通用组件)
- ColorUI (移动端-ColorUI组件)
- mobile-wechat (移动端-微信组件)
- Vant (移动端-Vant组件)
- Business (移动端-业务组件)
bigscreen (大屏组件)
business (业务组件)
- business-common (通用)
- business-jiaot (交通)
datasource (数据源组件)
extend (扩展组件)
map (地图组件)
- gaode-map (高德地图组件)
form (表单组件)
layout (行列布局)
baidu (百度云)
注意: 组件的id必须全局唯一.不然会出现覆盖原有的组件组
组件的图标
组件的图标规格:
两种方式增加:Font Awesome 方式
@Component({ icon: 'fa fa-pencil-square-o', gourp: 'ColorUI', name: "复选框", title: '复选框', visiable: true })Base64 方式
规格是: 16*16 的图片. 图片可以来源 iconfont 或者其他网路上的图片 通过 图片转base64 得到字符串粘贴到 icon 属性值@Component({ gourp: "form", title: '徽章', name: '徽章', icon: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQEAYAAABPYyMiAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAAZiS0dEAAAAAAAA+UO7fwAAAAlwSFlzAAAASAAAAEgARslrPgAAA41JREFUSMfVVEFIW2kQ/uZFTdWn2BItbQUrWFCkorRgiFWqNRoVxVupVQ8iKBYsFJIoNYogTZ6CUHtQhEiUogdRJHiQeCnoQQ0Vj0LBQ5GkbQ5S8l5MiHnTQ9awbJG4yx525/LD/N/M980wM8D/1aQiqUgqys+f1k/rp/X37v3TPJQMwMzMTDQ1ODU4NfjuHZrRjOb6etSiFrVaLZ7jOZ4ToR/96A+HcYITnHg85gHzgHlgZISIiIj5bwuIV5aeHnVFXVHXhw9Ch9AhdKSkcIhDHDo5wQY2sPHoUSKgHe1o//wZIkSIDx7wLu/y7vl5SBvShrSDg+M0TuMUDv+VR7hKQKw6Vh2rttkSjiMc4ejuXfSgBz3j43DDDXdbG6pQharW1oS/CU1o0ukEg2AQDGlpGe4Md4Z7ZOQqnt8EjPEYj7EgcBd3cdezZ+QjH/n8fnawgx1GYwI4hznMeb10QRd08fFjwp+FLGSZTOqyuqwuf/1KhVRIhUbjZd6kAtId6Y50h8EAGTJkRUEEEURMJuQiF7mqigUsYGFsDDWoQc3Ll+q+uq/uDw1hBStYefMGe9jDXiRCeZRHeUYjtrGN7UhENIgG0VBZmVQAD/EQD52eIogggoqCPvShTxQRQAABQYAOOuiamy0ui8vi+vLFWmwtthb7fDjFKU4fP4Yeeui1WpzhDGdZWdzCLdwiy1RCJVTi8yUVEEYYYfz4Ea+4rAyVqETlwUEC0IAGNGi10rF0LB23tU3mTOZM5rx4Ed+CW7cS0z1MwzR8cEB1VEd1ZWVBZ9AZdH7/fu0tkGRJluTNTUEn6ATdp0+czdmcbbNBggTpTx25tFKUovTiAgoUKIrCGtawxm4nkUQSnzyxNFoaLY2trdfegrTMtMy0zM5OXud1Xn/9mnu5l3vfvoUTTji93t8ClrCEJa8Xfvjht9logiZo4tUr9VA9VA87O6/iSbnqI7oaXY2u3r+PUYxi9M4dClCAAjMziCGG2OYmKlCBCocjMTtOdrLz4UMqoAIqeP8eW9jCVjSaupa6lrp2+3Yc9fPntTuARSxicXSU/OQn//k5rLDCSoR5zGM+FIoP6bdvly/lUz7lq2oC98c2qLPqrDp79R1IeopnTDOmGVN2dlgOy2HZ41F2lB1lp74+ftlk+RJnt9vtdvvNm5pyTbmm3OOJd+zpU3O3udvcrSjJeJJa/JDcuPFv4f4z9gs3sZGZWrM4ygAAACV0RVh0ZGF0ZTpjcmVhdGUAMjAyMC0wOC0wOFQyMDo0ODoyMyswODowMII3JuwAAAAldEVYdGRhdGU6bW9kaWZ5ADIwMjAtMDgtMDhUMjA6NDg6MjMrMDg6MDDzap5QAAAAU3RFWHRzdmc6YmFzZS11cmkAZmlsZTovLy9ob21lL2FkbWluL2ljb24tZm9udC90bXAvaWNvbl9mejgyZXZqaXNrOS9yZW56aGVuZ2h1aXpoYW5nLnN2Z28Z8WAAAAAASUVORK5CYII=' })
@serialize(type: any, defalutValue: any = undefined) 属性序列化的注解,标志该属性是要序列化(保存)到json内的.在设计模式下只有添加了该注解的组件属性才能保存属性值.**
@editor(attrType, config: IAttributeEditorBase, defalutValue = undefined, isSerialize: boolean = true)属性编辑器注解.
- 作用:
1.注册属性编辑,
2.标记是否初始化,
3.帮助构建属性字符串收集信息**
4.注意:一旦使用了这个注解,不能与 @serialize 一起用.会出现重复注册[${className}.${propertyName}]序列化属性,可能会出现属性覆盖的问题错误 - 参数:
- 作用:
/**
* Handsontable 表格组件
*/
@Component({ icon: 'fa fa-table', gourp: 'form', title: 'Handsontable', name: '复杂表格', visiable: true })
export class HandsonTable extends DbComponentBase {
@editor(Boolean, { labelCaption: '是否只读' })
readonly: Boolean;
/**
* 授权key
*/
@editor(String, { labelCaption: '授权key' }, '405f7-ebf37-5a5f7-e4f3d-64439')
licenseKey: String;
...
/**
* **注意**:使用注解注册属性编辑器这里不能少
*/
getAttrEditors() {
let attrs = super.getAttrEditors()
return attrs.concat(this.getAttrsByClassName(HandsonTable));
}
...
}@vueEditor(attrType, config: IVueAttrEditorConfig, defalutValue = undefined, isSerialize: boolean = true) vue组件的属性编辑器的注解,非vue组件使用 editor注解
作用:
1.注册属性编辑
2.标记是否初始化
3.帮助构建属性字符串收集信息
4.大量减少集成第三方的vue2组件的代码量注意:
1.一旦使用了这个注解,不能与 @serialize 一起用.会出现重复注册[${className}.${propertyName}]序列化属性,可能会出现属性覆盖的问题错误 ;
2.该注解必须与 以下代码组合使用才能正确的生成vue属性字符串... @vueEditor(String, { labelCaption: ' 当前列标题的自定义类名', vue: {} }) ... labelClassName?: string getAttrEditors() { let attrs = super.getAttrEditors() return attrs.concat(this.getAttrsByClassName(ElTableColumn)); }参数:
@dependency 注解
作用:
1.标记属性是依赖别的资源,打包时候会去扫描相关的资源参数:
- @param type 依赖的数据类型 默认值 DependencyType.file 静态文件
例子:
/** * 数据导出组件 */ @Component({ gourp: 'business-common', title: '数据导出', name: '数据导出', visiable: true, icon: 'fa fa-share' }) export class DataExport extends InvisibleBase { /** * 模板的唯一id * 这里使用了dependency 注解说明 这个属性是依赖了[模板管理]里面的模板,打包时候需要考虑吧模板也 * 打包进去 */ @dependency(DependencyType.templete) @serialize(String) templeteId: string;
注解的使用
import * as _ from "lodash";
import { DbComponentBase } from "yh-designer/dist/base/DbComponentBase";
import { Component, serialize } from "yh-designer/dist/base/decorators/Decorators";
import { EventAttrEditor } from "yh-designer/dist/designer/attrbuteEditors/EventAttrEditor";
import { InputAttrFormulaEditor } from "yh-designer/dist/designer/attrbuteEditors/InputAttrFormulaEditor";
import { SelectAttrEditor } from "yh-designer/dist/designer/attrbuteEditors/SelectAttrEditor";
import { Common } from "yh-designer/dist/utils/Common";
export enum BadgeShape {
normal = 'normal',
dot = 'dot',
rim = 'rim'
}
type BadgeStyle = {
Badge
}
/**
* 徽章组件
*/
@Component({ gourp: "form", title: '徽章', name: '徽章', icon: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQEAYAAABPYyMiAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAAZiS0dEAAAAAAAA+UO7fwAAAAlwSFlzAAAASAAAAEgARslrPgAAA41JREFUSMfVVEFIW2kQ/uZFTdWn2BItbQUrWFCkorRgiFWqNRoVxVupVQ8iKBYsFJIoNYogTZ6CUHtQhEiUogdRJHiQeCnoQQ0Vj0LBQ5GkbQ5S8l5MiHnTQ9awbJG4yx525/LD/N/M980wM8D/1aQiqUgqys+f1k/rp/X37v3TPJQMwMzMTDQ1ODU4NfjuHZrRjOb6etSiFrVaLZ7jOZ4ToR/96A+HcYITnHg85gHzgHlgZISIiIj5bwuIV5aeHnVFXVHXhw9Ch9AhdKSkcIhDHDo5wQY2sPHoUSKgHe1o//wZIkSIDx7wLu/y7vl5SBvShrSDg+M0TuMUDv+VR7hKQKw6Vh2rttkSjiMc4ejuXfSgBz3j43DDDXdbG6pQharW1oS/CU1o0ukEg2AQDGlpGe4Md4Z7ZOQqnt8EjPEYj7EgcBd3cdezZ+QjH/n8fnawgx1GYwI4hznMeb10QRd08fFjwp+FLGSZTOqyuqwuf/1KhVRIhUbjZd6kAtId6Y50h8EAGTJkRUEEEURMJuQiF7mqigUsYGFsDDWoQc3Ll+q+uq/uDw1hBStYefMGe9jDXiRCeZRHeUYjtrGN7UhENIgG0VBZmVQAD/EQD52eIogggoqCPvShTxQRQAABQYAOOuiamy0ui8vi+vLFWmwtthb7fDjFKU4fP4Yeeui1WpzhDGdZWdzCLdwiy1RCJVTi8yUVEEYYYfz4Ea+4rAyVqETlwUEC0IAGNGi10rF0LB23tU3mTOZM5rx4Ed+CW7cS0z1MwzR8cEB1VEd1ZWVBZ9AZdH7/fu0tkGRJluTNTUEn6ATdp0+czdmcbbNBggTpTx25tFKUovTiAgoUKIrCGtawxm4nkUQSnzyxNFoaLY2trdfegrTMtMy0zM5OXud1Xn/9mnu5l3vfvoUTTji93t8ClrCEJa8Xfvjht9logiZo4tUr9VA9VA87O6/iSbnqI7oaXY2u3r+PUYxi9M4dClCAAjMziCGG2OYmKlCBCocjMTtOdrLz4UMqoAIqeP8eW9jCVjSaupa6lrp2+3Yc9fPntTuARSxicXSU/OQn//k5rLDCSoR5zGM+FIoP6bdvly/lUz7lq2oC98c2qLPqrDp79R1IeopnTDOmGVN2dlgOy2HZ41F2lB1lp74+ftlk+RJnt9vtdvvNm5pyTbmm3OOJd+zpU3O3udvcrSjJeJJa/JDcuPFv4f4z9gs3sZGZWrM4ygAAACV0RVh0ZGF0ZTpjcmVhdGUAMjAyMC0wOC0wOFQyMDo0ODoyMyswODowMII3JuwAAAAldEVYdGRhdGU6bW9kaWZ5ADIwMjAtMDgtMDhUMjA6NDg6MjMrMDg6MDDzap5QAAAAU3RFWHRzdmc6YmFzZS11cmkAZmlsZTovLy9ob21lL2FkbWluL2ljb24tZm9udC90bXAvaWNvbl9mejgyZXZqaXNrOS9yZW56aGVuZ2h1aXpoYW5nLnN2Z28Z8WAAAAAASUVORK5CYII=' })
export class Badge extends DbComponentBase {
/**
* 形状
*/
@serialize(String, BadgeShape.normal)
public shape: BadgeShape
/**
* 值
*/
@serialize(String)
value: string;
/**
* 加载显示组件之前事件
*/
@serialize(String)
onLoadScript: string
row: any;
constructor(config) {
super(config);
this.addEvents('onClick');
this.canChildComponentsDrag = false;
}
getElemtHtml(): string {
let html = _.template(
`<span id="<%= id %>" class="` + this.css.Badge + `" shape="<%=shape%>">
<%= value %>
</span >`
)(this)
return html;
}
css: BadgeStyle
doGetCss(): BadgeStyle {
const styles = {
Badge: {
"position": "relative;",
"display": "inline-block;",
"padding": "0 6px;",
"color": "#fff;",
"background-color": "#FF5722;",
"text-align": "center;",
"font-size": "12px;",
"border-radius": "2px;",
"&[shape=normal]": {
"height": " 18px;",
"line-height": "18px;"
},
"&[shape=dot]": {
"width": "8px;",
"height": "8px;",
"padding": "0;",
"border-radius": "50%;",
},
"&[shape=rim]": {
"height": "18px;",
"color": "#666;",
"background-color": "#fff;",
"line-height": "18px;",
"border-width": "1px;",
"border-style": "solid;",
},
}
}
return styles;
}
/**
* 设置组件值
* @param value 值
*/
public setValue(value: string) {
if (value !== this.value) {
if (this.value !== value) {
this.value = value
}
this.$elemt.text(this.value)
}
}
getAttrEditors() {
let atrr = super.getAttrEditors();
atrr.push(new SelectAttrEditor(this, {
attr: "shape",
labelCaption: "形状",
title: "形状",
list() {
return [{
key: BadgeShape.normal,
value: "默认风格-椭圆体"
},
{
key: BadgeShape.rim,
value: "边框体"
},
{
key: BadgeShape.dot,
value: "小圆点"
}]
}
}));
atrr.push(new InputAttrFormulaEditor(this, {
attr: "value",
labelCaption: "标题",
title: "标题",
}));
atrr.push(new EventAttrEditor(this, {
attr: 'onLoadScript',
title: '加载事件',
btnText: '加载事件',
parameter: 'sender: ' + Common.getClassName(Badge)
}
));
return atrr;
}
render() {
let that = this;
that.raiseScriptEvent(that.onLoadScript, [that]);
super.render()
}
}参考
作者：admin 创建时间：2022-12-05 17:13
最后编辑：texbox 更新时间：2024-10-17 08:28
最后编辑：texbox 更新时间：2024-10-17 08:28
