uni-app 表单渲染与详情组件

diy-form uni-app 表单渲染组件

开发完表单组件后，需要在uni-app手机端进行调用展示

根据业务需求，自行开发，在需要的地方调用 diy-form 表单组件

用户填写的表单信息会缓存起来，不用担心跳转页面、刷新页面导致数据丢失的情况

如需了解自定义表单组件渲染的核心原理，开发者可以自行阅读

文件位置：uni-app/src/addon/components/diy-form/index.vue 效果图 关键代码

<diy-form ref="diyFormRef" :form_id="form_id" :storage_name="'diyFormStorageByGoodsDetail_' + sku_id" />

import diyForm from '@/addon/components/diy-form/index.vue'

const diyFormRef: any = ref(null)

const confirm = () => {
    // 表单验证
    if (!diyFormRef.value.verify()) return;
    // todo 执行后续业务逻辑代码
}

// 获取填写的表单信息
diyFormRef.value.getData()

// 清除填写的表单信息
diyFormRef.value.clearStorage()

diy-form-detail uni-app表单详情组件

用户填写完表单信息后，开发者根据自身业务需求，自行开发，在需要的地方调用

diy-form-detail 表单详情组件

如需了解自定义表单详情渲染的核心原理，开发者可以自行阅读

文件位置：uni-app/src/addon/components/diy-form-detail/index.vue 效果图 关键代码

<diy-form-detail :record_id="form_record_id" completeLayout="style-2" @callback="getDiyFormDetailCallback" />

import diyFormDetail from '@/addon/components/diy-form-detail/index.vue'

const getDiyFormDetailCallback = (data: any) => {
    // todo data为填写的表单信息
}