响应式表单组件布局

一、实现

// 响应式表单
@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%;}}
}

二、使用模板

三、参数说明

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

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！