Demo address
Download address
introduction
I have been working on the web system side for many years and have a deep understanding of the functional layout of the web system side. Often, some cv form tags are complicated to modify and repeat, and the style layout is almost unchanging. In order to be lazy, two advanced components, mosowe-form and mosowe-table, have been developed, and their ideas are borrowed from the advanced components of antdesign.
The components that depend on here are basically encapsulated by uniapp and by itself:
Depend on components
uni-form
uni-data-picker
uni-datetime-picker
uni-file-picker
uni-easyinput
uni-datetime-picker
uni-data-select
uni-data-picker
uni-data-checkbox
uni-combox
uni-popup
uni-row
uni-col
mosowe-editor
Online Demo
props
| property | type | default | illustrate |
| options | {formConfig, list：optionItem[]} |
- | Form configuration items |
| hideButton | boolean | false | Hide the built-in button |
| readOnly | boolean | false | Read only |
| resetIntercept | boolean | false | Block before resetting form |
| filterEmpty | boolean | false | Filter empty values when submitting |
| groupCol | object | - | Form group layout, here is the unified configuration, referenceuni-col |
| itemCol | object | Form item layout, here is the unified configuration, referenceuni-col | |
| btnAlign | string | left | The position of the submission button at the bottom Optional: left, right, center |
| submitText | string | submit | Submit button copy |
| resetText | string | Reset | Reset button copy |
formConfig
uni-form configuration data
optionItem
| property | type | default | illustrate |
| subTitle | string | - | Form grouping title, non-essential |
| col | object | - | Form group layout, referenceuni-col |
| items | object | - | The next level is the name of formItem (markitemName), configured asnameConfig
|
nameConfig
| property | type | default | illustrate |
| type | string | - | Form type,typeString
|
| defaultValue | any | - | default value |
| col | object | - | This layout, refer touni-col |
| hide | boolean | false | Hide the form and not render in html |
| visible | boolean | true | Display the form, display and display |
| typeProps | object | That is, the props configuration of the form item type | |
| formItemProps | object | The props configuration of uni-forms-item, the name in the configuration item will not become the name of uni-forms-item, and will beitemNamecover | |
| unionName | string | Associate form type, editer and upload are invalid, multiple unionNames are used&Split, note that there are no spaces before and after, that is, when the value of this itemName changes, the value of the related form is cleared or assigned. Assignment method: [associated itemName]=defaultValue. If defaultValue is multiple defaultValue, use [] package (there is no multi-select function in the component at present). If the defaultValue value is number type, add one before the value.~, example: sex=~1 |
|
| transform | function | Conversion is generally given to the data in the database that exists in the backend, and the parameters are the current value. |
typeString
| value | illustrate |
| input | Form input box, text field, note: There is less prop in the uni-easyinput document: primaryColor sets the theme color (default #2979ff) |
| select | Pull down to select, note: There is less prop written in the uni-data-select document: disabled |
| combox | Combo box |
| editor | Rich text editor, internal file upload function depends on cloud storage, and needs to be installedwangeditor |
| radio | Single choice + multiple choice |
| switch | Switch selector |
| date | Date selector |
| slider | Sliding selector |
| picker | picker selector |
| cascade | Cascading selector, local data only |
| upload | File upload will be automatically uploaded to the current cloud service space. If the unicloud cloud service space is not used, this component will not be used, and it will not be uploaded automatically. Upload it when clicking to submit. |
emits
| emits | illustrate |
| submit | Form Submission |
| reset | Form reset |
| change | Change form item, return form item name and value |
slots
| slot | illustrate |
| [itemName]Default | formItem's default slot |
| [itemName]DefaultBefore | formItem's default slot inside the front slot |
| [itemName]DefaultAfter | formItem's default slot inside the rear slot |
| [itemName]Label | formItem's label slot |
| [itemName]LabelBefore | formItem's label slot inside the front slot |
| [itemName]LabelAfter | formItem's label slot in the rear slot |
| button | Submit reset button area slot, scope parameters are: submit, reset |
| lineAfter | The slot behind the last form item will be displayed inline with the form item, and will not occupy a single row independently. The scope parameters are: submit, reset |
Sample code
<template>
<view class="index-page">
<mosowe-form
:options="formOptions"
ref="mosoweFormRef"
:groupCol="{
span: 12
}"
@submit="submit"
@reset="reset"
@change="change"
></mosowe-form>
</view>
</template>
<script setup lang="ts">
import { ref } from 'vue';
const mosoweFormRef = ref<any>(null)
const submit = (data:any) => {
('submit',data)
}
const reset = (data:any) => {
('reset',data)
}
const formOptions = ref({
formConfig:{
'label-width': '100px',
'label-align': 'right'
},
list:[
{
subTitle: 'Form Group One',
col:{
span: 24
},
items:{
name:{
type:'input',
defaultValue: 'test',
col:{
span: 12
},
unionName: 'address=Hahaha&sex=~1',
typeProps:{
placeholder:'Please enter'
},
formItemProps:{
label:'test',
required:true,
rules:[
{
required:true,
errorMessage: 'Please fill in your name'
}
]
}
},
address:{
type:'input',
col:{
span: 12
},
defaultValue: null,
typeProps:{
primaryColor:'#999999',
autoHeight:true,
type:'textarea',
placeholder:"Write here",
placeholderStyle:"color:#ff0000",
},
formItemProps:{
label:'Text Field',
}
},
editor:{
type:'editor',
defaultValue: '<p>11112222<strong>22</strong></p>',
typeProps:{
},
formItemProps:{
label:'Editor',
}
}
}
},
{
subTitle: 'Form Group Two',
items:{
sex:{
type:'select',
defaultValue: '',
unionName: 'address-Hahaha，Who are you',
typeProps:{
placeholder:'Please select',
localdata:[
{
value:0,
text:'male'
},
{
value:1,
text:'female'
},
{
value:2,
text:'unknown',
},
]
},
formItemProps:{
label:'gender',
}
},
city:{
type: 'combox',
defaultValue: '',
unionName: 'address=combox',
typeProps:{
candidates:[
'Beijing',
'Chongqing',
'Shanghai',
'Nanjing',
'Tianjin'
]
},
formItemProps:{
label:'City',
}
},
chooseR:{
type: 'radio',
defaultValue: '',
typeProps:{
localdata:[
{"value": 0,"text": "basketball" },
{"value": 1,"text": "football"},
{"value": 2,"text": "swim"},
]
},
formItemProps:{
label:'Single choice',
}
},
switchData:{
type:'switch',
defaultValue: true,
formItemProps:{
label:'switch',
}
},
sliderData:{
type:'slider',
defaultValue: 20,
typeProps:{
'show-value':true
},
formItemProps:{
label:'slider',
}
},
date:{
type:'date',
defaultValue: '',
typeProps:{},
formItemProps:{
label:'date',
}
},
daterange:{
type:'date',
defaultValue: '',
typeProps:{
type:'daterange'
},
formItemProps:{
label:'Date range',
}
},
datetime:{
type:'date',
defaultValue: '',
typeProps:{
type:'datetime'
},
formItemProps:{
label:'Date time',
}
},
datetimerange:{
type:'date',
defaultValue: '',
typeProps:{
type:'datetimerange'
},
formItemProps:{
label:'Date time range',
}
},
time:{
type:'picker',
defaultValue: '12:00',
typeProps:{
mode: 'time',
start:'00:00',
end:'13:59'
},
formItemProps:{
label:'time',
}
},
pickerdate:{
type:'picker',
defaultValue: '2023-03',
typeProps:{
mode: 'date',
fields:'month'
},
formItemProps:{
label:'month',
}
},
cascade:{
type:'cascade',
defaultValue: [],
typeProps:{
localdata:[{
text: "First Grade",
value: "1-0",
children: [{
text: "Class 1.1",
value: "1-1"
},
{
text: "Class 1.2",
value: "1-2"
}]
},
{
text: "Second Grade",
value: "2-0",
children: [{
text: "Class 2.1",
value: "2-1"
},
{
text: "Class 2.2",
value: "2-2"
}]
},
{
text: "Grade 3",
value: "3-0",
disable: true
}]
},
formItemProps:{
label:'cascade',
}
},
file:{
type:"upload",
defaultValue:{
extname: "png",
name: "",
url: "https:..." // Change to the actual address },
typeProps:{
'return-type':'object'
},
formItemProps:{
label: 'File Upload'
}
},
fileArr:{
type:"upload",
defaultValue:[{
extname: "png",
name: "",
url: "https:..." // Change to the actual address }],
typeProps:{},
formItemProps:{
label: 'File Upload'
}
},
fileArrNo:{
type:"upload",
defaultValue:'',
typeProps:{},
formItemProps:{
label: 'File Upload'
}
},
}
}
]
})
const change = (name:string,value:any) =>{
('change',name,value)
if (name === 'chooseR') {
[1]. = [
'Beijing',
'Chongqing',
value
]
}
}
</script>
<style lang="scss" scoped></style>
This is all about this article about mosowe-form, a high-level form component of uniapp. For more related content of mosowe-form form component of uniapp, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!