响应式表单组件布局

最新推荐文章于 2024-11-27 19:06:24 发布

smacricket00

最新推荐文章于 2024-11-27 19:06:24 发布

阅读量1.5k

点赞数 1

文章标签：前端 css3 css scss

本文链接：https://blog.csdn.net/qq_41068362/article/details/123435741

版权

本文档详细介绍了如何实现一套响应式表单的设计，包括样式定义、使用模板、参数说明以及特殊情况处理。代码片段展示了如何通过SCSS混合（mixin）实现灵活的布局，并提供了使用示例。此外，强调了保持全局一致性和特殊情况特殊处理的原则，确保代码的可维护性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、实现

// 响应式表单
@mixin global-form(
  $width: 420px,
  $gridGap: 24px,
  $innerWidth: 240px,
  $labelWidth: 100px
) {
  background: #ffffff;
  border-radius: 0 0 4px 4px;
  padding: 24px 0 8px 0;
  margin: 0;
  margin-top: 0;
  color: #323e58;
  font-size: 12px;

  .grid-form {
    display: grid;
    justify-content: space-between;
    grid-template-columns: repeat(auto-fill, $width);
    grid-gap: $gridGap;
  }

  & > *:not(:first-child) {
    padding-top: $gridGap;
  }

  .el-form-item {
    font-size: 12px;
  }

  /deep/.el-form-item__content {
    width: max-content;
  }

  /deep/.el-input__inner {
    height: 32px;
  }

  // 普通输入框
  /deep/.el-input__inner,
  /deep/.el-textarea__inner {
    width: $innerWidth;
    font-size: 12px;
    border: 1px solid #d7dbe8;
    &::placeholder {
      color: #c5cad5;
    }
  }
  // select输入框
  // /deep/.el-select .el-input__inner {
  //   width: 115px;
  // }

  /deep/.el-textarea .el-input__count {
    bottom: 0;
    background: transparent;
  }

  /deep/.el-input__count-inner {
    color: #c5cad5;
  }

  /deep/.el-form-item__label,
  /deep/.el-radio__label {
    font-size: 12px;
    color: #323e58;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /deep/.el-form-item--small.el-form-item {
    margin: 0;
  }

  /deep/.el-radio-group {
    max-width: 300px;
  }

  // 上传图片的提示
  .upload-tips {
    width: max-content;
    margin-top: 8px;
    color: #858b9c;
    font-size: 12px;
    line-height: 18px;
  }

  // 自定义提示（一直都存在）
  .custom-tip {
    padding-top: 4px;
    font-size: 12px;
    color: #c5cad5;
    line-height: 22px;

    .btn-text {
      color: #2a65e9;
      cursor: pointer;
    }
  }

  // 富文本编辑器
  .form-editor {
    position: relative;
    // width: calc(100vw / 1440 * 1104);
    width: calc(100% - #{$labelWidth});
    z-index: 0;

    /deep/.w-e-toolbar {
      border-radius: 4px 4px 0 0;
    }

    /deep/.w-e-text-container {
      border-radius: 0 0 4px 4px;
    }

    /deep/.placeholder {
      color: #c5cad5;
      font-size: 12px;
    }
    /deep/ .w-e-toolbar p,
    /deep/ .w-e-text-container p,
    /deep/ .w-e-menu-panel p {
      font-size: 12px !important;
      color: #323e58;
    }
  }

  // 填满剩余宽度（除去label的宽度）,加在form-item上面
  .fill-width {
    /deep/.el-form-item__content {
      width: calc(100% - #{$labelWidth});
    }

    /deep/.el-input__inner,
    /deep/.el-textarea__inner {
      width: 100%;
    }
  }
}

二、使用模板

<template>
    <!-- form-cnt类名自定义即可 -->
    <el-form class="form-cnt">
        <!-- 自适应的form-item列表 -->
        <div class="grid-form">
            <el-form-item />
            ...
        </div>
        <!-- 单独一行的form-item -->
        <el-form-item />
        ...
    </el-form>
</template>

<!-- 注意这里style标签必须得同下，必须带scoped -->
<style lang="scss" scoped>
    . form-cnt {
        // 不带参数，使用默认值
        @include global-form;
        // 带参数
        @include global-form(340px)
    }
</style>

三、参数说明

global-form($width: 420px, $gridGap: 24px, $innerWidth: 240px, $labelWidth: 100px)

$width : el-form的总体宽度

$gridGap : el-form之间的间隙，统一为24px

$innerWidth: el-input__inner的宽度

$labelWidth: 100px: el-form-item__label的宽度，用于计算表单占满宽度的

以后可能修改：按理来说，$width是不需要传的，是通过$innerWidth 和 $labelWidth计算就可以了

四、特殊情况说明

global-form 中已对大部分表单类型进行适配，对于global-form 中没有定义过的表单类，可以在mixin下面进行全局修改，如果修改后影响到其他页面的需要特殊处理，不可全局修改。

原则：保持全局一致性，特殊情况特殊处理（过多特殊情况是不可取的）

五、参考示例

涉及到公司的设计规范就不拿出来了

六、总结（题外话）

这是感觉UI规范和具体的业务编写的一套定制化代码，所以并不适合所有人，这里只是记录以下工作的东西。而且上面整个文档在公司都是有这个文档的，内容基本一致。