cron表达式组件 cronbox
# 一、组件简介
AppInput 的 cronbox 类型的组件为定时任务封装的 cron 表达式 (opens new window) 组件。
# 二、Props 参数
属性 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
columns | 配置项 | object | undefined | |
value | 输入框内容 | string | undefined | |
typeParams | 类型参数 | object | {} | |
size | 控件大小,配置项中没有 size 属性时,使用此属性 | string | large、default、small | small |
reseal | 是否要重新封装组件 | boolean | false |
# 2.1 columns 详细配置
属性 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
xtype | AppInput的类型 | string | textfield | |
allowClear | 是否允许点击清除图标删除内容 | boolean | false | |
clearable | 与 allowClear 功能相同 (优先取allowClear) | boolean | false | |
placeholder | 占位符,提示文字 | string | undefined | |
defaultValue | 默认值 | string | 预设默认值 | undefined |
disabled | 是否禁用(优先) | boolean, function(typeParams): boolean | false | |
readOnly | 与 disabled 功能相同 (优先取disabled) | boolean | false | |
size | 控件大小 | string | large、default、small | small |
# 2.2 typeParams 说明
typeParams 译为类型参数,用来标记当前输入组件的类型,它是一个对象,可以为其传递任意属性,当值发生变化后,会将其按原样返回。
例如:
- 在表格中使用时,希望为其添加行记录
:typeParams="{ row }"
- 在表单中使用时,希望为其添加表单数据
:typeParams="{ formData }"
# 三、Events 事件
属性 | 说明 | 参数 |
---|---|---|
valueChange | 当数据改变后触发 | { columns: 列配置对象, value: 当前值, oldValue: 旧值 } |
提示
- Events 事件中的方法均可挂载在配置项下
- 当需要重新封装组件(reseal 为 true)时,若挂载在配置项下,则无效
# 四、简单示例
<template>
<app-input :value.sync="cronbox" :columns="cronboxColumns" />
</template>
<script>
export default {
name: '组件应有自己的名字,首字母大写,按目录使用驼峰命名',
data () {
cronbox: undefined,
cronboxColumns: {
xtype: 'cronbox'
// allowClear: true,
// clearable: true,
// placeholder: '占位符',
// defaultValue: '* * * * * ? *',
// disabled: true,
// readOnly: true,
// size: 'small'
}
}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22