關(guān)于uniapp的高級表單組件mosowe-form

更新時(shí)間：2023年04月23日 10:32:26 作者：Mosowe

這篇文章主要介紹了關(guān)于uniapp的高級表單組件mosowe-form,由于一些表單標(biāo)簽改來改去比較繁瑣，重復(fù)性很多，且樣式布局啥的幾乎萬變不離其中，為了偷懶，開發(fā)了mosowe-form及mosowe-table兩款高級組件,需要的朋友可以參考下

引言

常年做web系統(tǒng)端，對web系統(tǒng)端的功能布局等有很深刻的了解，經(jīng)常cv一些表單標(biāo)簽改來改去比較繁瑣，重復(fù)性很多，且樣式布局啥的幾乎萬變不離其中，為了偷懶，開發(fā)了mosowe-form及mosowe-table兩款高級組件，其思路借鑒了antdesign的高級組件。

這里面依賴的組件基本是uniapp官方的和自己二次封裝的：

依賴組件

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

在線演示

props

屬性	類型	默認(rèn)	說明
options	{`formConfig`, list：`optionItem[]`}	-	表單配置項(xiàng)
hideButton	boolean	false	隱藏自帶按鈕
readOnly	boolean	false	只讀
resetIntercept	boolean	false	重置表單前攔截
filterEmpty	boolean	false	提交時(shí)過濾空值
groupCol	object	-	表單分組布局，這里是統(tǒng)一配置，參考uni-col
itemCol	object		表單項(xiàng)布局，這里是統(tǒng)一配置，參考uni-col
btnAlign	string	left	底部提交按鈕位置可選：left、right、center
submitText	string	提交	提交按鈕文案
resetText	string	重置	重置按鈕文案

formConfig

uni-form配置數(shù)據(jù)

optionItem

屬性	類型	默認(rèn)	說明
subTitle	string	-	表單分組標(biāo)題，非必選
col	object	-	表單分組布局，參考uni-col
items	object	-	下一級為formItem的name（標(biāo)記itemName），配置為`nameConfig`

nameConfig

屬性	類型	默認(rèn)	說明
type	string	-	表單類型，`typeString`
defaultValue	any	-	默認(rèn)值
col	object	-	該項(xiàng)布局，參考uni-col
hide	boolean	false	隱藏該表單，不渲染在html中
visible	boolean	true	顯示該表單，display顯隱
typeProps	object		即表單項(xiàng)類型type的props配置
formItemProps	object		uni-forms-item的props配置，配置項(xiàng)內(nèi)的name不會(huì)成為uni-forms-item的name，會(huì)被itemName覆蓋
unionName	string		關(guān)聯(lián)表單類型，editer及upload無效，多個(gè)unionName用`&`分割，注意前后沒有空格，即當(dāng)本itemName值改變時(shí)，相關(guān)表單的值清空或者賦值，賦值方式：[關(guān)聯(lián)itemName]=defaultValue，defaultValue多個(gè)的話使用[]包裹(目前組件中沒有多選功能)，若defaultValue值為number類型，則在值前添加一個(gè)`~`，例：sex=~1
transform	function		提交時(shí)轉(zhuǎn)化，一般來說都是吐給后端的存在數(shù)據(jù)庫里的數(shù)據(jù)，參數(shù)為當(dāng)前值

typeString

值	說明
input	表單輸入框，文本域，注意：uni-easyinput文檔中少寫了一個(gè)prop：primaryColor 設(shè)置主題色（默認(rèn)#2979ff）
select	下拉選擇，注意：uni-data-select文檔中少寫了一個(gè)prop：disabled 禁用
combox	組合框
editor	富文本編輯器，內(nèi)部文件上傳功能依賴云存儲(chǔ)，需安裝wangeditor
radio	單選+多選
switch	開關(guān)選擇器
date	日期選擇器
slider	滑動(dòng)選擇器
picker	picker選擇器
cascade	級聯(lián)選擇器，僅限本地?cái)?shù)據(jù)
upload	文件上傳，會(huì)自動(dòng)上傳至當(dāng)前云服務(wù)空間，若未使用unicloud云服務(wù)空間，則不使用該組件，非自動(dòng)上傳，點(diǎn)擊提交時(shí)上傳

emits

emits	說明
submit	表單提交
reset	表單重置
change	表單項(xiàng)改變，返回表單項(xiàng)name及值

slots

slot	說明
[itemName]Default	formItem的default插槽
[itemName]DefaultBefore	formItem的default插槽內(nèi)前置插槽
[itemName]DefaultAfter	formItem的default插槽內(nèi)后置插槽
[itemName]Label	formItem的label插槽
[itemName]LabelBefore	formItem的label插槽內(nèi)前置插槽
[itemName]LabelAfter	formItem的label插槽內(nèi)后置插槽
button	提交重置按鈕區(qū)插槽，作用域參數(shù)為：submit，reset
lineAfter	最后一個(gè)表單項(xiàng)后面的插槽，將會(huì)與表單項(xiàng)內(nèi)聯(lián)展示，不獨(dú)立占一行，作用域參數(shù)為：submit，reset

示例代碼

<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) => {
  console.log('submit',data)
}

const reset = (data:any) => {
  console.log('reset',data)
}
const formOptions = ref({
  formConfig:{
    'label-width': '100px',
    'label-align': 'right'
  },
  list:[
    {
      subTitle: '表單分組一',
      col:{
        span: 24
      },
      items:{
        name:{
          type:'input',
          defaultValue: '測試',
          col:{
            span: 12
          },
          unionName: 'address=哈哈哈&sex=~1',
          typeProps:{
            placeholder:'請輸入'
          },
          formItemProps:{
            label:'測試',
            required:true,
            rules:[
              {
                required:true,
                errorMessage: '請?zhí)顚懶彰?
              }
            ]
          }
        },
        address:{
          type:'input',
          col:{
            span: 12
          },
          defaultValue: null,
          typeProps:{
            primaryColor:'#999999',
            autoHeight:true,
            type:'textarea',
            placeholder:"寫這里",
            placeholderStyle:"color:#ff0000",
          },
          formItemProps:{
            label:'文本域',
          }
        },
        editor:{
          type:'editor',
          defaultValue: '<p>11112222<strong>22</strong></p>',
          typeProps:{
          },
          formItemProps:{
            label:'編輯器',
          }
        }
      }
    },
    {
      subTitle: '表單分組二',
      items:{
        sex:{
          type:'select',
          defaultValue: '',
          unionName: 'address-哈哈哈，你是誰',
          typeProps:{
            placeholder:'請選擇',
            localdata:[
              {
                value:0,
                text:'男'
              },
              {
                value:1,
                text:'女'
              },
              {
                value:2,
                text:'未知',
              },
            ]
          },
          formItemProps:{
            label:'性別',
          }
        },
        city:{
          type: 'combox',
          defaultValue: '',
          unionName: 'address=combox',
          typeProps:{
            candidates:[
              '北京',
              '重慶',
              '上海',
              '南京',
              '天津'
            ]
          },
          formItemProps:{
            label:'城市',
          }
        },
        chooseR:{
          type: 'radio',
          defaultValue: '',
          typeProps:{
            localdata:[
              {"value": 0,"text": "籃球"  },
              {"value": 1,"text": "足球"},
              {"value": 2,"text": "游泳"},
            ]
          },
          formItemProps:{
            label:'單選',
          }
        },
        switchData:{
          type:'switch',
          defaultValue: true,
          formItemProps:{
            label:'開關(guān)',
          }
        },
        sliderData:{
          type:'slider',
          defaultValue: 20,
          typeProps:{
            'show-value':true
          },
          formItemProps:{
            label:'滑塊',
          }
        },
        date:{
          type:'date',
          defaultValue: '',
          typeProps:{},
          formItemProps:{
            label:'日期',
          }
        },
        daterange:{
          type:'date',
          defaultValue: '',
          typeProps:{
            type:'daterange'
          },
          formItemProps:{
            label:'日期范圍',
          }
        },
        datetime:{
          type:'date',
          defaultValue: '',
          typeProps:{
            type:'datetime'
          },
          formItemProps:{
            label:'日期時(shí)間',
          }
        },
        datetimerange:{
          type:'date',
          defaultValue: '',
          typeProps:{
            type:'datetimerange'
          },
          formItemProps:{
            label:'日期時(shí)間范圍',
          }
        },
        time:{
          type:'picker',
          defaultValue: '12:00',
          typeProps:{
            mode: 'time',
            start:'00:00',
            end:'13:59'
          },
          formItemProps:{
            label:'時(shí)間',
          }
        },
        pickerdate:{
          type:'picker',
          defaultValue: '2023-03',
          typeProps:{
            mode: 'date',
            fields:'month'
          },
          formItemProps:{
            label:'月份',
          }
        },
        cascade:{
          type:'cascade',
          defaultValue: [],
          typeProps:{
            localdata:[{
              text: "一年級",
              value: "1-0",
              children: [{
                text: "1.1班",
                value: "1-1"
              },
              {
                text: "1.2班",
                value: "1-2"
              }]
            },
            {
              text: "二年級",
              value: "2-0",
              children: [{
                text: "2.1班",
                value: "2-1"
              },
              {
                text: "2.2班",
                value: "2-2"
              }]
            },
            {
              text: "三年級",
              value: "3-0",
              disable: true
            }]
          },
          formItemProps:{
            label:'級聯(lián)',
          }
        },
        file:{
          type:"upload",
          defaultValue:{
            extname: "png",
            name: "1111111.png",
            url: "https:..." // 改成實(shí)際地址
          },
          typeProps:{
            'return-type':'object'
          },
          formItemProps:{
            label: '文件上傳'
          }
        },
        fileArr:{
          type:"upload",
          defaultValue:[{
            extname: "png",
            name: "1111111.png",
            url: "https:..." // 改成實(shí)際地址
          }],
          typeProps:{},
          formItemProps:{
            label: '文件上傳'
          }
        },
        fileArrNo:{
          type:"upload",
          defaultValue:'',
          typeProps:{},
          formItemProps:{
            label: '文件上傳'
          }
        },
      }
    }
  ]
})

const change = (name:string,value:any) =>{
  console.log('change',name,value)
  if (name === 'chooseR') {
    formOptions.value.list[1].items.city.typeProps.candidates = [
              '北京',
              '重慶',
              value
            ]
  }
}
</script>

<style lang="scss" scoped></style>

到此這篇關(guān)于關(guān)于uniapp的高級表單組件mosowe-form的文章就介紹到這了,更多相關(guān)uniapp的mosowe-form表單組件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: