注入属性脚本
注入属性是为指定部件成员绑定到组件的属性中,如日期选择编辑器使用的是el-date-picker组件,可添加注入属性type、format、valueFormat来控制编辑器组件显示类型。
参数
| 名称 | 类型 | 描述 |
|---|---|---|
| context | IApiContext | 当前视图上下文 |
| params | IApiParams | 当前视图参数 |
| data | IApiData | 当前业务数据 |
| targetName | string | 部件名称 |
| view | IApiViewController | 当前视图 |
| ctrl | IApiControlController | 当前部件 |
| document | Document | 当前文档对象 |
| selector | (className: string) => HTMLCollectionOf<Element> | 元素选择器 |
| env | IEnvironment | 当前环境对象 |
| appSession | IApiData | 当前应用会话对象 |
| topViewSession | IApiData | 当前顶级视图会话对象 |
| viewSession | IApiData | 当前视图会话对象 |
| viewParam | IApiParams | |
| app | IApiAppHubController | 当前应用 |
| topView | IApiViewController | 当前顶级视图 |
| parentView | IApiViewController | undefined | 当前父视图 |
| parent | IApiViewController | undefined | 当前父视图 |
| util | { message: IApiMessageUtil, notification: IApiNotificationUtil,modal: IApiModalUtil,confirm: IApiConfirmUtil,openView: IApiOpenViewUtil} | 工具集 |
调用示例
时间范围选择判断该日期是否应该被禁用
typescript
// 通过元素审查可以发现时间范围选择器使用的是elementPlus组件中的DatePicker(日期选择器),通过设置disabledDate参数可以约束时间范围选择器的可选日期,接受一个 Date 对象作为参数。 应该返回一个 Boolean 值。因此注入属性名称为disabledDate,脚本内容如下所示:
(time) => {
if (!data.end_at) {
return false;
}
const end_at = new Date(data.end_at);
time.setHours(0, 0, 0, 0);
end_at.setHours(0, 0, 0, 0);
return time.getTime() > end_at.getTime();
};根据表单数据修改日期选择器显示类型
- 修改el-date-picker的type属性(注入属性为type)
data.sjlx === 'YEAR' ? 'daterange' : 'monthrange'- 修改el-date-picker的format属性(注入属性为format)
data.sjlx === 'YEAR' ? 'YYYY-MM-DD' : 'YYYY-MM'- 修改el-date-picker的value-format属性(注入属性为valueFormat)
data.sjlx === 'YEAR' ? 'YYYY-MM-DD' : 'YYYY-MM'