cube-ui组件Form自定义_cube-form-item-CSDN博客

本文链接：https://blog.csdn.net/caoyan0829/article/details/103960759

本文介绍如何自定义cube-ui中的Form组件，通过展示HTML、JS和CSS代码实例，详细解析实现过程，帮助读者理解组件的定制方法。

摘要由CSDN通过智能技术生成

效果图：

HTML部分代码：

          <cube-form-group style="background: #FFFFFF;">
            <cube-form-item :field="fields[0]"></cube-form-item>
            <cube-form-item :field="fields[1]"></cube-form-item>
            <cube-form-item :field="fields[2]" class="cube-form-none-border">
              <div class="upload-box">
                <p>上传营业执照照片</p>
                <cube-upload
                  ref="businessLicenseUrl"
                  v-model="model.businessLicenseUrl"
                  :action="action + '?type=3&code=企业统一社会信用代码'"
                  @files-added="addedHandler('businessLicenseUrl')"
                  @file-error="errHandler"
                >
                  <div class="clear-fix">
                    <cube-upload-file
                      v-for="(file, i) in model.businessLicenseUrl"
                      :file="file"
                      :key="i"
                    ></cube-upload-file>
                    <cube-upload-btn :multiple="false">
                      <div>
                        <i></i>
                        <p>上传营业执照照片</p>
                      </div>
                    </cube-upload-btn>
                  </div>
                </cube-upload>
              </div>
            </cube-form-item>
            <div class="form-cap"></div>
            <cube-form-item :field="fields[3]"></cube-form-item>
            <cube-form-item :field="fields[4]"></cube-form-item>
            <div class="upload-double">
              <cube-form-item :field="fields[5]">
                <div class="upload-box">
                  <p>上传法人身份证</p>
                  <cube-upload
                    ref="legalPersonIdCardFrontUrl"
                    v-model="model.legalPersonIdCardFrontUrl"
                    :action="action + '?type=1&code=企业统一社会信用代码'"
                    @files-added="addedHandler('legalPersonIdCardFrontUrl')"
                    @file-error="errHandler"
                  >
                    <div class="clear-fix">
                      <cube-upload-file
                        v-for="(file, i) in model.legalPersonIdCardFrontUrl"
                        :file="file"
                        :key="i"
                      ></cube-upload-file>
                      <cube-upload-btn :multiple="false">
                        <div>
                          <i></i>
                          <p>上传法人身份证正面照片</p>
                        </div>
                      </cube-upload-btn>
                    </div>
                  </cube-upload>
                </div>
              </cube-form-item>
              <cube-form-item :field="fields[6]">
                <cube-upload
                  ref="legalPersonIdCardBackUrl"
                  v-model="model.legalPersonIdCardBackUrl"
                  :action="action + '?type=2&code=企业统一社会信用代码'"
                  @files-added="addedHandler('legalPersonIdCardBackUrl')"
                  @file-error="errHandler"
                >
                  <div class="clear-fix">
                    <cube-upload-file
                      v-for="(file, i) in model.legalPersonIdCardBackUrl"
                      :file="file"
                      :key="i"
                    ></cube-upload-file>
                    <cube-upload-btn :multiple="false">
                      <div>
                        <i></i>
                        <p>上传法人身份证反面照片</p>
                      </div>
                    </cube-upload-btn>
                  </div>
                </cube-upload>
              </cube-form-item>
            </div>
            <div class="form-cap"></div>
            <cube-form-item :field="fields[7]"></cube-form-item>
            <cube-form-item :field="fields[8]"></cube-form-item>
            <cube-form-item :field="fields[9]"></cube-form-item>
            <cube-form-item :field="fields[10]"></cube-form-item>
            <cube-form-item :field="fields[11]" class="cube-form-none-border">
              <cube-upload
                ref="controlPersonIdCardFrontUrl"
                v-model="model.controlPersonIdCardFrontUrl"
                :action="action + '?type=4&code=