acribus v1.0.29
principle: Convention over configuration
only needs to specify unconventional aspects of the application by config
develop
开发分支在dev 发布分支在master the way how you look at an app
Conventions
- state structure {
moduleName
List,moduleName
} - action name load
moduleName
List loadmoduleName
- field in table and editable
helpers && keywords
keywords used to trigger a predefined action or expand a predefined object
helpers used to generate config object easily
#form-tpl
how to use
<FormTpl
:model="formData"
:fields="config.form"
v-if="config.form"
:options="{inline: true, nativeOn: {click: onSearch}}">
<!--optional: some slot here -->
</FormTpl>
how to write fields
fields is an array like:
[
{
type: 'input',
label: 'SLS Tracking Order ID',
key: 'sls_tracking_number',
rule: {
'sls_tracking_number': [{
type: 'number',
message: `${key} should be a number !`
}
}]
},
{
type: 'input',
label: 'Shopee Order SN',
key: 'shopee_order_sn'
},
{
type: 'select',
label: 'Status',
key: 'status',
options: RECEIVE.STATUS.map((val, index) => ({
value: index.toString(),
label: val
})),
options: {
on: {
change: 'submit'
}
}
},
{
type: 'date-picker',
subType: 'datetimerange',
label: 'Pick Up Time',
key: 'pick_up_time',
placeholder: ['start time', 'end time']
}
]
writing this object by hand can be bored, so the following pattern is recommended, using helper which provided by package
new FieldInput('Email', 'email', ['required', 'email']),
new FieldInput('Phone', 'phone', true),
new FieldSelect('Status', 'status', [
...USER.STATUS.map((item, index) => ({
label: item,
value: index
}))
], true),
new FieldMultiSelect('Role', 'role_list', () => {
return this.roleOptions
}, true),
hint: two ways to pass options: array or function which return an array, functional way is necessary when options is dynamic
form-tpl provide many keyword to ease your writing,
options: {
on: {
change: 'submit'
}
}
instand of writing function handler, form submitting can be triggered by a string 'submit'
Property | Description | Type | Default |
---|---|---|---|
form | optional hold the reference of form component, used to get form status | Object | null |
model | hold all the value user have input | Object | {} |
fields | defined the form input | Array | [] |
rules | optional to specify the validation rules, can be written in fields | Object | null |
options | optional to specify the trivial things like layout | Object | null |
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago