diff --git a/README_CN.md b/README_CN.md
index 1e7812f..66879bb 100644
--- a/README_CN.md
+++ b/README_CN.md
@@ -150,7 +150,7 @@ export default {
- [ncform config/props/api/event](./CONFIG.md)
-- [Standard Components](./STD-COMP.md)
+- [Standard Components](./STD-COMP_CN.md)
- [How to extend](./EXT-DOC.md)
diff --git a/STD-COMP.md b/STD-COMP.md
index 5da185e..9e7b399 100755
--- a/STD-COMP.md
+++ b/STD-COMP.md
@@ -1,6 +1,6 @@
# Standard Components
-如果你不太喜欢冷冰冰的文字描述,可点击 [互动版本](https://ncform.github.io/ncform/ncform-theme-elementui/index.html)
+If you don't like the cold text description, click on the [interactive version](https://ncform.github.io/ncform/ncform-theme-elementui/index.html).
## control components
@@ -8,10 +8,10 @@
```js
{
- disabled: false, // 是否禁用。支持dx表达式
- readonly: false, // 是否只读。支持dx表达式
- placeholder: '', // 占位显示。支持dx表达式
- hidden: false, // 是否隐藏。支持dx表达式
+ disabled: false, // Whether to disable. Support for dx expressions
+ readonly: false, // Whether it is read only. Support for dx expressions
+ placeholder: '', // Placeholder display. Support for dx expressions
+ hidden: false, // Whether it is hidden. Support for dx expressions
}
```
@@ -19,7 +19,7 @@
```js
{
- multiLine: false, // 是否多行显示 (当为false时,内容溢出时用...显示,然后鼠标移上去可显示完整的内容)
+ multiLine: false, // Whether to display multiple lines (if false, display with "..." when the content overflows, user can move the mouse up to display the complete content)
}
```
@@ -27,67 +27,67 @@
```js
{
- type: 'text', // 显示类型,可选值:[text | number | password | file]
- prefixIcon: '', // 前图标样式名
- suffixIcon: '', // 后图标样式名
- modelField: '', // 当值为对象时使用(即使用compound.prependSelect或compound.appendSelect)
- trim: true, // 是否自动将前后空格trim掉,默认为true
- clearable: false, // 是否可清空,默认为false
+ type: 'text', // Display type, optional values: [text | number | password | file]
+ prefixIcon: '', // Prefix icon class name
+ suffixIcon: '', // Suffix icon class name
+ modelField: '', // Used when the value is an object (ie using compound.prependSelect or compound.appendSelect)
+ trim: true, // Whether to automatically trim the front and rear spaces, the default is true
+ clearable: false, // Whether it can be emptied, the default is false
- autocomplete: { // 自动补全
- itemValueField: 'value', // 项数据表示value的字段
- itemTemplate: '{{item.value}}', // 显示项的模板
- immediateShow: false, // 是否立即显示,如果为false则当输入关键字才显示
- enumSource: [{value: [String | Number | Boolean], label: ''}], // 当提示数据是本地而非远程时提供
+ autocomplete: { // Automatic completion
+ itemValueField: 'value', // Item data represents the field of value
+ itemTemplate: '{{item.value}}', // Display item template
+ immediateShow: false, // Whether to display immediately, if it is false, it will be displayed when input the keyword.
+ enumSource: [{value: [String | Number | Boolean], label: ''}], // Provided when the prompt data is local rather than remote
enumSourceRemote: {
- remoteUrl: '', // 如果是远程访问,则填写该url
- paramName: 'keyword', // 请求参数名,默认是keyword
- otherParams: {}, // 其它请求参数,值支持 dx表达式
- resField: '', // 响应结果的字段
+ remoteUrl: '', // If it is remote call, fill in the url
+ paramName: 'keyword', // Request parameter name, default is keyword
+ otherParams: {}, // Other request parameters, values support dx expressions
+ resField: '', // Response result field
}
},
- compound: { // 组合
- prependLabel: '', // 前置标签
- appendLabel: '', // 后置标签
- prependIcon: '', // 前置图标样式
- appendIcon: '', // 后置图标样式
- prependSelect: { // 前置下拉框,使用该种的数据必须是对象
- itemLabelField: 'label', // 项数据表示label的字段
- itemValueField: 'value', // 项数据表示value的字段
- enumSource: [{value: [String | Number | Boolean], label: ''}], // 本地数据源
- enumSourceRemote: { // 远程数据源
- remoteUrl: '', // 如果是远程访问,则填写该url
- resField: '', // 响应结果的字段
+ compound: { // Combination
+ prependLabel: '', // Prepend label
+ appendLabel: '', // Append label
+ prependIcon: '', // Prepend icon class name
+ appendIcon: '', // Append icon class name
+ prependSelect: { // Prepend select, the data used for this kind must be an object
+ itemLabelField: 'label', // Item data represents the field of the label
+ itemValueField: 'value', // Item data represents the field of value
+ enumSource: [{value: [String | Number | Boolean], label: ''}], // Local data source
+ enumSourceRemote: { // Remote data source
+ remoteUrl: '', // If it is remote call, fill in the url
+ resField: '', // Response result field
},
- modelField: '' // 用于绑定input value值的某个属性
+ modelField: '' // An attribute used to bind the value of the input value
},
- appendSelect: { // 后置下拉框,使用该种的数据必须是对象
- itemLabelField: 'label', // 项数据表示label的字段
- itemValueField: 'value', // 项数据表示value的字段
- enumSource: [{value: [String | Number | Boolean], label: ''}], // 本地数据源
- enumSourceRemote: { // 远程数据源
- remoteUrl: '', // 如果是远程访问,则填写该url
- resField: '', // 响应结果的字段
+ appendSelect: { // Append select, The data used for this kind must be an object
+ itemLabelField: 'label', // Item data represents the field of the label
+ itemValueField: 'value', // Item data represents the field of value
+ enumSource: [{value: [String | Number | Boolean], label: ''}], // Local data source
+ enumSourceRemote: { // Remote data source
+ remoteUrl: '', // If it is remote call, fill in the url
+ resField: '', // Response result field
},
- modelField: '' // 用于绑定input value值的某个属性
+ modelField: '' // An attribute used to bind the value of the input value
}
},
- upload: { // 上传的参数配置(当type="file"时,只认这个参数)
- uploadUrl: '', // 上传的地址
- resField: 'data', // 数据源读取返回文件数据的字段名
- data: {}, // 上传时附带的额外参数
- fileField: 'file', // 表示文件的字段,默认是file
- accept: '', // 接受上传的文件类型
- constraint: { // 约束
- width: 0, // 图片宽度 [仅图片有效]
- height: 0, // 图片高度 [仅图片有效]
- sizeFixed: true, // 图片尺寸约束的大小是否按固定值,当为false时按比例 [仅图片有效]
- maxSize: 0, // 最大文件大小,单位KB,0代表不限
- minSize: 0 // 最小文件大小,单位KB,0代表不限
+ upload: { // Uploaded parameter configuration (only recognize this parameter when type="file")
+ uploadUrl: '', // Uploaded address
+ resField: 'data', // The data source reads the field name of the returned file data
+ data: {}, // Additional parameters attached when uploading
+ fileField: 'file', // The field representing the file, the default is file
+ accept: '', // Accept uploaded file types
+ constraint: { // constraint
+ width: 0, // Image width [image only]
+ height: 0, // Image height [image only]
+ sizeFixed: true, // Whether the size of the image size constraint is a fixed value, and when it is false, it is proportional [image only valid]
+ maxSize: 0, // Maximum file size in KB, 0 means no limit
+ minSize: 0 // Minimum file size in KB, 0 means no limit
},
- uploadText: '点击上传', // 上传按钮的名称
+ uploadText: 'Click to upload', // Upload button name
}
}
```
@@ -96,9 +96,9 @@
```js
{
- min: 0, // 最小值
- max: Infinity, // 最大值
- step: 1, // 步长
+ min: 0, // Minimum value
+ max: Infinity, // Maximum
+ step: 1, // Step size
}
```
@@ -106,8 +106,8 @@
```js
{
- rows: 2, // 行数
- autosize: true, // 自适应内容高度,可选值:[boolean | { minRows: 2, maxRows: 6 }]
+ rows: 2, // Rows
+ autosize: true, // Adaptive content height, optional: [boolean | { minRows: 2, maxRows: 6 }]
}
```
@@ -115,16 +115,16 @@
```js
{
- multiple: false, // 是否多选
- clearable: true, // 是否出现清空选项
- filterable: false, // 是否可搜索,即可输入关键字
- filterLocal: true, // 搜索本地的还是远程的数据,当为true时,就算配了enumSourceRemote,也只会从远程取一次数据
+ multiple: false, // Whether to choose more
+ clearable: true, // Whether the empty button appears
+ filterable: false, // Whether searchable
+ filterLocal: true, // Filter by local or remote data. if true, even with enumSourceRemote, data will only be retrieved once remotely.
- itemTemplate: '
{{label}}', // 显示项的模板
- itemLabelField: 'label', // 项数据表示label的字段
- itemValueField: 'value', // 项数据表示value的字段
- enumSource: [{value: [String | Number | Boolean], label: ''}], // 本地数据源
- enumSourceRemote: { // 远程数据源
+ itemTemplate: '{{label}}', // Display item template
+ itemLabelField: 'label', // Item data represents the field of the label
+ itemValueField: 'value', // Item data represents the field of value
+ enumSource: [{value: [String | Number | Boolean], label: ''}], // Local data source
+ enumSourceRemote: { // Remote data source
remoteUrl: '', // 如果是远程访问,则填写该url
paramName: 'keyword', // 请求参数名,默认是keyword
otherParams: {}, // 额外的请求参数。支持dx表达式
diff --git a/STD-COMP_CN.md b/STD-COMP_CN.md
new file mode 100644
index 0000000..5da185e
--- /dev/null
+++ b/STD-COMP_CN.md
@@ -0,0 +1,304 @@
+# Standard Components
+
+如果你不太喜欢冷冰冰的文字描述,可点击 [互动版本](https://ncform.github.io/ncform/ncform-theme-elementui/index.html)
+
+## control components
+
+- all components
+
+```js
+{
+ disabled: false, // 是否禁用。支持dx表达式
+ readonly: false, // 是否只读。支持dx表达式
+ placeholder: '', // 占位显示。支持dx表达式
+ hidden: false, // 是否隐藏。支持dx表达式
+}
+```
+
+- label
+
+```js
+{
+ multiLine: false, // 是否多行显示 (当为false时,内容溢出时用...显示,然后鼠标移上去可显示完整的内容)
+}
+```
+
+- input
+
+```js
+{
+ type: 'text', // 显示类型,可选值:[text | number | password | file]
+ prefixIcon: '', // 前图标样式名
+ suffixIcon: '', // 后图标样式名
+ modelField: '', // 当值为对象时使用(即使用compound.prependSelect或compound.appendSelect)
+ trim: true, // 是否自动将前后空格trim掉,默认为true
+ clearable: false, // 是否可清空,默认为false
+
+ autocomplete: { // 自动补全
+ itemValueField: 'value', // 项数据表示value的字段
+ itemTemplate: '{{item.value}}', // 显示项的模板
+ immediateShow: false, // 是否立即显示,如果为false则当输入关键字才显示
+ enumSource: [{value: [String | Number | Boolean], label: ''}], // 当提示数据是本地而非远程时提供
+ enumSourceRemote: {
+ remoteUrl: '', // 如果是远程访问,则填写该url
+ paramName: 'keyword', // 请求参数名,默认是keyword
+ otherParams: {}, // 其它请求参数,值支持 dx表达式
+ resField: '', // 响应结果的字段
+ }
+ },
+
+ compound: { // 组合
+ prependLabel: '', // 前置标签
+ appendLabel: '', // 后置标签
+ prependIcon: '', // 前置图标样式
+ appendIcon: '', // 后置图标样式
+ prependSelect: { // 前置下拉框,使用该种的数据必须是对象
+ itemLabelField: 'label', // 项数据表示label的字段
+ itemValueField: 'value', // 项数据表示value的字段
+ enumSource: [{value: [String | Number | Boolean], label: ''}], // 本地数据源
+ enumSourceRemote: { // 远程数据源
+ remoteUrl: '', // 如果是远程访问,则填写该url
+ resField: '', // 响应结果的字段
+ },
+ modelField: '' // 用于绑定input value值的某个属性
+ },
+ appendSelect: { // 后置下拉框,使用该种的数据必须是对象
+ itemLabelField: 'label', // 项数据表示label的字段
+ itemValueField: 'value', // 项数据表示value的字段
+ enumSource: [{value: [String | Number | Boolean], label: ''}], // 本地数据源
+ enumSourceRemote: { // 远程数据源
+ remoteUrl: '', // 如果是远程访问,则填写该url
+ resField: '', // 响应结果的字段
+ },
+ modelField: '' // 用于绑定input value值的某个属性
+ }
+ },
+
+ upload: { // 上传的参数配置(当type="file"时,只认这个参数)
+ uploadUrl: '', // 上传的地址
+ resField: 'data', // 数据源读取返回文件数据的字段名
+ data: {}, // 上传时附带的额外参数
+ fileField: 'file', // 表示文件的字段,默认是file
+ accept: '', // 接受上传的文件类型
+ constraint: { // 约束
+ width: 0, // 图片宽度 [仅图片有效]
+ height: 0, // 图片高度 [仅图片有效]
+ sizeFixed: true, // 图片尺寸约束的大小是否按固定值,当为false时按比例 [仅图片有效]
+ maxSize: 0, // 最大文件大小,单位KB,0代表不限
+ minSize: 0 // 最小文件大小,单位KB,0代表不限
+ },
+ uploadText: '点击上传', // 上传按钮的名称
+ }
+}
+```
+
+- input-number
+
+```js
+{
+ min: 0, // 最小值
+ max: Infinity, // 最大值
+ step: 1, // 步长
+}
+```
+
+- textarea
+
+```js
+{
+ rows: 2, // 行数
+ autosize: true, // 自适应内容高度,可选值:[boolean | { minRows: 2, maxRows: 6 }]
+}
+```
+
+- select
+
+```js
+{
+ multiple: false, // 是否多选
+ clearable: true, // 是否出现清空选项
+ filterable: false, // 是否可搜索,即可输入关键字
+ filterLocal: true, // 搜索本地的还是远程的数据,当为true时,就算配了enumSourceRemote,也只会从远程取一次数据
+
+ itemTemplate: '{{label}}', // 显示项的模板
+ itemLabelField: 'label', // 项数据表示label的字段
+ itemValueField: 'value', // 项数据表示value的字段
+ enumSource: [{value: [String | Number | Boolean], label: ''}], // 本地数据源
+ enumSourceRemote: { // 远程数据源
+ remoteUrl: '', // 如果是远程访问,则填写该url
+ paramName: 'keyword', // 请求参数名,默认是keyword
+ otherParams: {}, // 额外的请求参数。支持dx表达式
+ resField: '', // 响应结果的字段
+ selectFirstItem: false // 默认选中第一项
+ },
+}
+```
+
+- radio
+
+```js
+{
+ type: 'radio', // 显示类型,可选值:[radio | button]
+ arrangement: 'h', // 排列 可选值 [v | h]
+
+ itemValueField: '', // 值字段 默认值为value
+ itemLabelField: '' // 显示字段 默认值为label
+ enumSource: [{value: [String | Number | Boolean], label: ''}], // 可选项,默认[{value: true, label: '是'}, {value: false, label: '否'}]
+ enumSourceRemote: { // 远程数据源
+ remoteUrl: '', // 如果是远程访问,则填写该url
+ resField: '', // 响应结果的字段
+ },
+}
+```
+
+- checkbox
+
+```js
+{
+ selectAll: false, // 是否显示全选
+ arrangement: 'h', // 排列 可选值 [v | h]
+ type: 'checkbox', // 显示类型,可选值:[checkbox | button]
+
+ itemValueField: '', // 值字段 默认值为value
+ itemLabelField: '' // 显示字段 默认值为label
+ enumSource: [{value: [String | Number | Boolean], label: ''}], // 可选项,默认值[{label: '是'}]
+ enumSourceRemote: { // 远程数据源
+ remoteUrl: '', // 如果是远程访问,则填写该url
+ resField: '', // 响应结果的字段
+ },
+}
+
+```
+
+- upload
+
+```js
+{
+ uploadUrl: '', // 上传的地址
+ resField: 'data', // 数据源读取返回文件数据的字段名
+ fileUrlField: 'url', // 数据源读取返回带有文件数据的字段resField下的 文件地址 字段. 默认 "url"
+ fileNameField: '', // 数据源读取返回带有文件数据的字段resField下的 文件名 字段. 默认 "name"
+
+ multiple: false, // 是否支持多选
+ data: {}, // 上传时附带的额外参数
+ fileField: 'file', // 表示文件的字段,默认是file
+ showFileList: false, // 是否显示已上传文件列表
+ drag: false, // 是否启用拖拽上传
+ accept: '', // 接受上传的文件类型
+ listType: 'text', // 文件列表的类型。 可选值:text/picture/picture-card
+ autoUpload: false, // 是否在选取文件后立即进行上传
+ limit: -1, // 最大允许上传个数
+ constraint: { // 约束
+ width: 0, // 图片宽度 [仅图片有效]
+ height: 0, // 图片高度 [仅图片有效]
+ sizeFixed: true, // 图片尺寸约束的大小是否按固定值,当为false时按比例 [仅图片有效]
+ maxSize: 0, // 最大图片大小,单位KB,0代表不限
+ minSize: 0 // 最小图片大小,单位KB,0代表不限
+ }
+}
+```
+
+- rate
+
+```js
+{
+ max: 5, // 最大分值
+ allowHalf: false, // 是否允许半选
+ lowThreshold: 2, // 低分和中等分数的界限值,值本身被划分在低分中
+ highThreshold: 4, // 高分和中等分数的界限值,值本身被划分在高分中
+ colors: ['#F7BA2A', '#F7BA2A', '#F7BA2A'], // icon 的颜色数组,共有 3 个元素,为 3 个分段所对应的颜色
+ voidColor: '#C6D1DE', // 未选中 icon 的颜色
+ disabledVoidColor: '#EFF2F7', // 只读时未选中 icon 的颜色
+ iconClasses: ['el-icon-star-on', 'el-icon-star-on','el-icon-star-on'], // icon 的类名数组,共有 3 个元素,为 3 个分段所对应的类名
+ voidIconClass: 'el-icon-star-off', // 未选中 icon 的类名
+ disabledVoidIconClass: 'el-icon-star-on', // 只读时未选中 icon 的类名
+ showText: false, // 是否显示辅助文字,若为真,则会从 texts 数组中选取当前分数对应的文字内容
+ showScore: false, // 是否显示当前分数,showScore 和 showText 不能同时为真
+ textColor: '#1F2D3D', // 辅助文字的颜色
+ texts: ['极差', '失望', '一般', '满意', '惊喜'] // 辅助文字数组
+}
+```
+
+- slider
+
+```js
+{
+ min: 0, // 最小值
+ max: 100, // 最大值
+ step: 1, // 步长
+}
+```
+
+- date-picker
+
+```js
+{
+ clearable: false, // 是否显示清除按钮
+ type: 'date', // year/month/date/week/datetime
+ format: '', // 格式显示
+}
+```
+
+- color-picker
+
+```js
+{
+}
+```
+
+## layout component
+
+- object
+
+```js
+{
+ layout: 'v', // 布局类型,垂直即为label上control下,水平即为label左control右,可选值:[v | h]
+ labelWidth: '100px', // 当布局类型为h时有效
+ collapsed: false, // 是否默认折叠
+ disableCollapse: false, // 是否允许折叠
+}
+```
+
+- array
+
+```js
+{
+ disableAdd: true, // 是否禁止添加项
+ disableDel: true, // 是否禁止删除项
+ disableReorder: true, // 是否禁止排序
+ disableCollapse: false, // 是否允许折叠
+ collapsed: false, // 是否默认折叠
+ disableItemCollapse: false, // 是否允许项折叠
+ itemCollapse: false, // 项是否默认折叠
+ addTxt: 'Add', // 新建文字
+ delAllTxt: 'Del All' // 删除全部文字
+}
+```
+
+- array-table
+
+```js
+{
+ disableAdd: true, // 是否禁止添加项
+ disableDel: true, // 是否禁止删除项
+ disableReorder: true, // 是否禁止排序
+ collapsed: false, // 是否默认折叠
+ disableCollapse: false, // 是否允许折叠
+ addTxt: 'Add', // 新建文字
+ delAllTxt: 'Del All' // 删除全部文字
+}
+```
+
+- array-tabs
+
+```js
+{
+ disableAdd: true, // 是否禁止添加项
+ disableDel: true, // 是否禁止删除项
+ tabPosition: 'top', // 可选值:left / top
+ collapsed: false, // 是否默认折叠
+ disableCollapse: false, // 是否允许折叠
+ addTxt: 'Add', // 新建文字
+ delAllTxt: 'Del All' // 删除全部文字
+}
+```