自定义表单架构优化-PC、移动端代码分离

由于项目中 pc 端和 移动端 的都是同一套数据，所以代码分离的重点就集中在组件的模板中，当前组件采用的是v-if 和 v-else-if 的方式来渲染对应模式下的组件， 为了以后方便维护不同端下的代码，所以进行优化。

组件模板优化

<template>
  <div>
    <div v-if="mode === 'DESIGN'">
      <el-input disabled :placeholder="placeholder" :value="defaultValue" />
    </div>
    <div v-else-if="mode === 'PC' && !readonly">
      <el-input clearable v-model="_value" :placeholder="placeholder">
        <template #append v-if="enableScan">
          <el-button @click="scanCode">
            <DesignIcon name="el-icon-fullscreen" />
          </el-button>
        </template>
      </el-input>
      <!-- <scan-code pcMode v-model="visible" @ok="scanOk" /> -->
      <scan-code pcMode :isShow="visible" @scanCancel="scanCancel" @ok="scanOk" />
    </div>
    <div v-else-if="mode === 'MOBILE' && !readonly">
      <field v-model="_value" clearable :placeholder="placeholder">
        <template #right-icon v-if="enableScan">
          <DesignIcon name="el-icon-fullscreen" @click="scanCode" />
        </template>
      </field>
      <!-- <scan-code v-model="visible" @ok="scanOk" /> -->
      <scan-code :isShow="visible" @scanCancel="scanCancel" @ok="scanOk" />
    </div>
    <div v-else>
      {{ _value }}
    </div>
  </div>
</template>

这是输入框组件的模板代码 当在移动端的情况下 其实只需要以下这段代码就够了

 <div v-else-if="mode === 'MOBILE' && !readonly">
      <field v-model="_value" clearable :placeholder="placeholder">
        <template #right-icon v-if="enableScan">
          <DesignIcon name="el-icon-fullscreen" @click="scanCode" />
        </template>
      </field>
      <!-- <scan-code v-model="visible" @ok="scanOk" /> -->
      <scan-code :isShow="visible" @scanCancel="scanCancel" @ok="scanOk" />
    </div>

组件样式优化

组件的样式也可以拆分出来

<style lang="less" scoped>
.process-form {
  :deep(.el-form-item__label) {
    height: 30px;
    line-height: 30px;
    padding: 0 0;
  }

  :deep(.van-cell) {
    padding: 0.267rem 0;
    font-size: 0.6rem;
  }
}

:deep(.el-form-item__label) {
  margin-bottom: 0 !important;
}

:deep(.readonly) {
  font-size: 16px;
  .el-form-item {
    margin-bottom: 10px;

    .el-form-item__label::before {
      display: none;
    }

    .el-form-item__content {
      padding-left: 5px;
      line-height: 30px;
    }
  }

  .m-form-item {
    padding: 10px 5px;
    margin-bottom: 0;

    .m-form-item_title {
      font-size: 16px;

      .title-required {
        display: none;
      }
    }

    .m-form-item_content {
      padding-left: 4px;
    }
  }
}
</style>

pc端

.process-form {
  :deep(.el-form-item__label) {
    height: 30px;
    line-height: 30px;
    padding: 0 0;
  }

  :deep(.van-cell) {
    padding: 0.267rem 0;
    font-size: 0.6rem;
  }
}

:deep(.el-form-item__label) {
  margin-bottom: 0 !important;
}

:deep(.readonly) {
  font-size: 16px;
  .el-form-item {
    margin-bottom: 10px;

    .el-form-item__label::before {
      display: none;
    }

    .el-form-item__content {
      padding-left: 5px;
      line-height: 30px;
    }
  }

移动端

  .m-form-item {
    padding: 10px 5px;
    margin-bottom: 0;

    .m-form-item_title {
      font-size: 16px;

      .title-required {
        display: none;
      }
    }

    .m-form-item_content {
      padding-left: 4px;
    }
  }

组件结构分离

改造后的文件结构如上图所示 在表单组件中 分为 Mobile 和 PC 两个文件夹 这两个文件夹中的模板和样式是独立的 但是逻辑是通过 mixins 用的 因为组件渲染的一些逻辑是相同的 如果后续需要扩展 只需要在对应的文件夹下新增业务功能即可

表单渲染组件分离（FormRender,ProcessRender)

也是如上图一样按照 PC 端和 Mobile端分离 然后再在引入文件的地方根据对应的终端引入对应文件。