mirror of
https://github.com/vxcontrol/ncform.git
synced 2026-07-21 06:15:23 -04:00
daniel.xiao
358 lines
14 KiB
Markdown
Executable File
358 lines
14 KiB
Markdown
Executable File
# Standard Components
|
||
|
||
[中文版](STD-COMP_CN.md)
|
||
|
||
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
|
||
|
||
- all components
|
||
|
||
```js
|
||
{
|
||
disabled: false, // Whether to disable.
|
||
readonly: false, // Whether it is read only.
|
||
placeholder: '', // Placeholder display.
|
||
hidden: false, // Whether it is hidden.
|
||
}
|
||
```
|
||
|
||
- label
|
||
|
||
```js
|
||
{
|
||
inVLayout: false, // is in a vertical layout or not (when in a vertical layout, the distance to the label can be corrected by setting it to true)
|
||
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)
|
||
}
|
||
```
|
||
|
||
- input
|
||
|
||
```js
|
||
{
|
||
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
|
||
updateOn: 'change', // Timing of triggering value changes, the default is to trigger when value changed. Optional value: ['change', 'blur']
|
||
size: '', // Input box size, optional values: [medium | small | mini]
|
||
|
||
autocomplete: { // Automatic completion
|
||
itemValueField: 'value', // Item data represents the field of value
|
||
itemTemplate: '<span>{{item.value}} {{item.desc}}</span>', // 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], desc: ''}], // Provided when the prompt data is local rather than remote
|
||
enumSourceRemote: {
|
||
remoteUrl: '', // If it is remote call, fill in the url
|
||
paramName: 'keyword', // Request parameter name, default is keyword
|
||
otherParams: {}, // Other request parameters
|
||
resField: '', // Response result field
|
||
}
|
||
},
|
||
|
||
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: '', // An attribute used to bind the value of the input value
|
||
placeholder: '', // placeholder
|
||
},
|
||
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: '', // An attribute used to bind the value of the input value
|
||
placeholder: '', // placeholder
|
||
}
|
||
}，
|
||
|
||
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: 'Click to upload', // Upload button name
|
||
headers: {}, // Set the request headers for the upload
|
||
}
|
||
}
|
||
```
|
||
|
||
- input-number
|
||
|
||
```js
|
||
{
|
||
min: 0, // Minimum value
|
||
max: Infinity, // Maximum
|
||
step: 1, // Step size，
|
||
size: '', // Size. Options：[medium | small | mini]
|
||
}
|
||
```
|
||
|
||
- textarea
|
||
|
||
```js
|
||
{
|
||
rows: 2, // Rows
|
||
autoSize: true, // Adaptive content height, optional: [boolean | { minRows: 2, maxRows: 6 }]
|
||
updateOn: 'change', // Timing of triggering value changes, the default is to trigger when value changed. Optional value: ['change', 'blur']
|
||
}
|
||
```
|
||
|
||
- select
|
||
|
||
```js
|
||
{
|
||
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.
|
||
size: '', // Size. Options：[medium | small | mini]
|
||
|
||
itemDataKey: "", // The key of the selected item's data, can accessed by {{$temp[itemDataKey]}}
|
||
|
||
itemTemplate: '<span>{{item.label}} : {{item.value}}</span>', // 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: '', // If it is remote call, fill in the url
|
||
paramName: 'keyword', // Request parameter name, default is keyword
|
||
otherParams: {}, // Additional request parameters.
|
||
resField: '', // Response result field
|
||
selectFirstItem: false // Whether the first item is selected by default
|
||
},
|
||
}
|
||
```
|
||
|
||
- radio
|
||
|
||
```js
|
||
{
|
||
type: 'radio', // Display type. optional values: [radio | button]
|
||
arrangement: 'h', // Arrange. optional values: [v | h]
|
||
|
||
itemDataKey: "", // The key of the selected item's data, can accessed by {{$temp[itemDataKey]}}
|
||
|
||
itemValueField: '', // Value field. default value is "value"
|
||
itemLabelField: '', // Display field. default value is "label"
|
||
enumSource: [{value: [String | Number | Boolean], label: ''}], // Local data source. default: [{value: true, label: '是'}, {value: false, label: '否'}]
|
||
enumSourceRemote: { // Remote data source
|
||
remoteUrl: '', // If it is remote call, fill in the url
|
||
resField: '', // Response result field
|
||
},
|
||
}
|
||
```
|
||
|
||
- checkbox
|
||
|
||
```js
|
||
{
|
||
selectAll: false, // Whether to display all selections
|
||
arrangement: 'h', // Arrange. optional values: [v | h]
|
||
type: 'checkbox', // Display type, optional values: [checkbox | button]
|
||
|
||
itemDataKey: "", // The key of the selected item's data, can accessed by {{$temp[itemDataKey]}}
|
||
|
||
itemValueField: '', // Value field. default value is "value"
|
||
itemLabelField: '', // Display field. default value is "label"
|
||
enumSource: [{value: [String | Number | Boolean], label: ''}], // Local data source. default: [{label: '是'}]
|
||
enumSourceRemote: { // Remote data source
|
||
remoteUrl: '', // If it is remote call, fill in the url
|
||
resField: '', // Response result field
|
||
},
|
||
}
|
||
|
||
```
|
||
|
||
- upload
|
||
|
||
```js
|
||
{
|
||
uploadUrl: '', // Uploaded address
|
||
resField: 'data', // The data source reads the field name of the returned file data
|
||
fileUrlField: 'url', // The data source reads the file address field under the field resField with the file data. Default "url"
|
||
fileNameField: '', // The data source reads the file name field under the field resField with the file data. Default "name"
|
||
|
||
multiple: false, // Whether to support multiple selection
|
||
data: {}, // Additional parameters attached when uploading
|
||
fileField: 'file', // The field representing the file, the default is file
|
||
showFileList: false, // Whether to display the list of uploaded files
|
||
drag: false, // Whether to enable drag and drop upload
|
||
accept: '', // Accept uploaded file types
|
||
listType: 'text', // The type of file list. Optional value: [ text | picture | picture-card ]
|
||
autoUpload: false, // Whether to upload immediately after selecting a file
|
||
limit: 1, // Maximum number of uploads allowed
|
||
headers: {}, // Set the request headers for the upload
|
||
}
|
||
```
|
||
|
||
- rate
|
||
|
||
```js
|
||
{
|
||
max: 5, // Maximum score
|
||
allowHalf: false, // Whether semi-selection is allowed
|
||
lowThreshold: 2, // The threshold of low and medium scores, the value itself is divided into low scores
|
||
highThreshold: 4, // The limit value of the high score and the medium score, the value itself is divided into high scores
|
||
colors: ['#F7BA2A', '#F7BA2A', '#F7BA2A'], // The color array of icon, with 3 elements, the color corresponding to 3 segments
|
||
voidColor: '#C6D1DE', // Unchecked icon color
|
||
disabledVoidColor: '#EFF2F7', // The color of the icon is not selected when read-only
|
||
iconClasses: ['el-icon-star-on', 'el-icon-star-on','el-icon-star-on'], // Icon's class name array, with 3 elements, the class name corresponding to 3 segments
|
||
voidIconClass: 'el-icon-star-off', // Class name of icon not selected
|
||
disabledVoidIconClass: 'el-icon-star-on', // Class name of icon is not selected when read-only
|
||
showText: false, // Whether to display auxiliary text, if true, the text content corresponding to the current score will be selected from the texts array
|
||
showScore: false, // Whether to display the current score, showScore and showText cannot be true at the same time
|
||
textColor: '#1F2D3D', // Auxiliary text color
|
||
texts: ['极差', '失望', '一般', '满意', '惊喜'] // Auxiliary text array
|
||
}
|
||
```
|
||
|
||
- slider
|
||
|
||
```js
|
||
{
|
||
min: 0, // Minimum value
|
||
max: 100, // Maximum
|
||
step: 1, // Step size
|
||
}
|
||
```
|
||
|
||
- date-picker
|
||
|
||
```js
|
||
{
|
||
clearable: false, // Whether to display the clear button
|
||
type: 'date', // year/month/date/week/datetime
|
||
format: '', // Format display
|
||
valueFormat: '', // The format of the output value. Empty means a millisecond string
|
||
size: '', // Size. Options：[medium | small | mini]
|
||
}
|
||
```
|
||
|
||
- color-picker
|
||
|
||
```js
|
||
{
|
||
}
|
||
```
|
||
|
||
- switch
|
||
|
||
```js
|
||
{
|
||
width: 40, // Switch's width（pixel）
|
||
activeIconClass: '', // The class name of the icon displayed when the switch is turned on. Setting this item ignores activeText
|
||
inactiveIconClass: '', // The class name of the icon displayed when the switch is closed. Setting this item ignores inactiveText
|
||
activeText: '', // Text description when switch is turned on
|
||
inactiveText: '', // Text description when switch is off
|
||
activeValue: '', // The value of the switch when it is turned on. default is true [boolean / string / number]
|
||
inactiveValue: '', // The value of the switch when it is turned off. default is false [ boolean / string / number ]
|
||
activeColor: '#409EFF', // Background color when switch is on
|
||
inactiveColor: '#C0CCDA', // Background color when switch is off
|
||
}
|
||
```
|
||
|
||
## layout component
|
||
|
||
- object
|
||
|
||
```js
|
||
{
|
||
layout: 'v', // Layout type, vertical is the control under label, horizontal is label left control right, optional values: [v | h]
|
||
labelWidth: '100px', // Valid when the layout type is h
|
||
collapsed: false, // Whether to fold by default
|
||
disableCollapse: false, // Whether to allow folding
|
||
}
|
||
```
|
||
|
||
- array
|
||
|
||
```js
|
||
{
|
||
disableAdd: true, // Whether to prohibit the addition of items
|
||
disableDel: true, // whether to disable item deletion
|
||
delExceptionRows: 'dx: (function(item) { return false })' // The exception rows for delete action. These rows can be deleted when disableDel is true and cannot be deleted when disableDel is false
|
||
disableReorder: true, // Whether to prohibit sorting
|
||
disableCollapse: false, // Whether to allow folding
|
||
collapsed: false, // Whether to fold by default
|
||
disableItemCollapse: false, // Whether to allow items to be folded
|
||
itemCollapse: false, // Whether the item is folded by default
|
||
addTxt: 'Add', // New display text
|
||
delAllTxt: 'Del All', // Delete all display text
|
||
requiredDelConfirm: false, // Whether the deletion requires confirmation
|
||
delConfirmText: { // Delete confirmation text
|
||
item: '',
|
||
all: ''
|
||
},
|
||
showOneIfEmpty: false, // Show one item if empty
|
||
}
|
||
```
|
||
|
||
- array-table
|
||
|
||
```js
|
||
{
|
||
disableAdd: true, // Whether to prohibit the addition of items
|
||
disableDel: true, // whether to disable item deletion
|
||
delExceptionRows: 'dx: (function(item) { return false })' // The exception rows for delete action. These rows can be deleted when disableDel is true and cannot be deleted when disableDel is false
|
||
disableReorder: true, // Whether to prohibit sorting
|
||
collapsed: false, // Whether to fold by default
|
||
disableCollapse: false, // Whether to allow folding
|
||
addTxt: 'Add', // New display text
|
||
delAllTxt: 'Del All', // Delete all display text
|
||
requiredDelConfirm: false, // Whether the deletion requires confirmation
|
||
delConfirmText: { // Delete confirmation text
|
||
item: '',
|
||
all: ''
|
||
},
|
||
showOneIfEmpty: false, // Show one item if empty
|
||
colgroup: [ // Column configuration
|
||
{
|
||
width: '', // Column width, pixels or %
|
||
}
|
||
],
|
||
}
|
||
```
|
||
|
||
- array-tabs
|
||
|
||
```js
|
||
{
|
||
disableAdd: true, // Whether to prohibit the addition of items
|
||
disableDel: true, // whether to disable item deletion
|
||
delExceptionRows: 'dx: (function(item) { return false })' // The exception rows for delete action. These rows can be deleted when disableDel is true and cannot be deleted when disableDel is false
|
||
tabPosition: 'top', // Optional value：[left | top]
|
||
collapsed: false, // Whether to fold by default
|
||
disableCollapse: false, // Whether to allow folding
|
||
requiredDelConfirm: false, // Whether the deletion requires confirmation
|
||
delConfirmText: { // Delete confirmation text
|
||
item: '',
|
||
all: ''
|
||
},
|
||
showOneIfEmpty: false, // Show one item if empty
|
||
}
|
||
```
|