持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第19天，点击查看活动详情

优化

上一篇已经说了如何做出来一个简易的表单组件，这一次我们把它优化一下

目标

• 美观，可以让使用者自己调整padding
• 响应式，可以让他在不同的屏幕下展示不同的样式

美观

form表单绑定style，可以调整表单样式

我们设置一个变量itemStyle来管理它的样式

itemStyle: {
  type: Object,
  default: {
    padding: "10px 40px",
  },
},

并且给他一个默认样式，这样当我们没有传值的时候就是用默认样式

我们还希望可以动态调整label

同上用labelWidth来管理

labelWidth: {
  type: String,
  default: "120px",
},

此时的表单

我们给app传递labelWidth的值

此时的页面

响应式表单

element-plus对于布局提供了很多选择，我们去官网看一下

我们只需要用到这几个属性，一般来说表单的行被划分成24分，我们只需要选择在不同的尺寸下，单独的表格被划分成几分就可以完成响应布局

colLayout用来管理布局

• 在xl我们希望是4个表格
• 在lg我们希望是3个表格
• 在md我们希望是2个表格
• 在sm我们希望是1个表格
• 在xs我们希望是1个表格

colLayout: {
  type: Object,
  default:{
    xl: 6,
    lg: 8,
    md: 12,
    sm: 12,
    xs: 24
 }

这样就完成了，默认状态的布局，我们来尝试一下，看一看页面是否响应

可以看到，是没问题的，我们成功了

封装

明天再封装，时间不早了，累死了，大家加油哦！