uni-app开发——基于uni-forms和ThorUI简单封装的表单组件

uni-app出现较长时间了，优势也是不言而喻（一次开发能应用小程序、app、网页等），但一直觉得伴随其出现的UI组件相当不成熟，开发起来总是遇到很多难题。
这里描述一下uni-app开发中表单的处理，页面样式大体：


废话也不多说了，类似这种的申报页面多的很，那肯定要提取公共部分进行封装咯。
大体借鉴一下思想吧，此处代码多是应对本次项目开发，不具备 多项目的一般性

<!-- **基于uni-forms和ThorUI简单封装的表单组件**
	**itemsDatas的prop 对应的是 fromData的数据字段**
	**注意：码表部分prop对应其name,value对应其码值，dict_key为码表类型,hidden是否展示行**
-->
<template>
	<uni-forms class="formStyle" ref="form" :value="formData" :rules="rules">
		<block v-for="item in itemsDatas" :key="item.label + item.prop">
			<!-- title样式，a标签做锚点 -->
			<view class="formTitle" v-if="item.type==='headTitle'&&item.hidden!==false">
				<a :name="item.label"></a>
				<view class="tit">{
   {
   item.label}}</view>
				<view class="discri">{
   {
   item.prop}}</view>
			</view>
			<!-- 基本input -->
			<uni-forms-item class="side-padding" :name="item.prop" :required="item.required||false" :label="item.label" v-else-if="item.type==='input'&&item.hidden!==false">
				<input :disabled="formData.disabled || item.disabled || false" type="text" v-model="formData[item.prop]" class="uni-input-border" placeholder-style="font-size: 32rpx;color:#CCCCCC;text-align: right;" @blur="binddata(item.prop, $event.detail.value)" :placeholder="item.placeholder||'请输入'" />
			</uni-forms-item>