2021.9.1
坑57（组件折叠）：简单实现向左折叠，无动画。效果是点击带箭头的长条（加了背景色方便查看）改变折叠状态。思路是外层包裹flex自动左到右排列，使用v-show控制内层元素显示，图标使用@element-plus/icons。
<template>
????<div class='viewBox'>
????????<AItem v-show="isShowAItem" />
????????<div class='ArrowForAItem' @click="changeAItemShow">
????????????<el-icon :size='10'>
????????????????<arrow-left v-show="isShowAItem"/>
????????????????<arrow-right v-show="!isShowAItem"/>
????????????</el-icon>
????????</div>
????</div>
</template>
<script>
import { reactive,toRefs } from 'vue'
import AItemfrom '../../../components/AItem.vue'
export default {
????name: 'User',
????components:{?AItem },
????setup() {
????????const state=reactive({
????????????isShowAItem: true,
????????})
????????const changeAItemShow=()=>{
????????????state.isShowAItem=!state.isShowAItem
????????}
????????return {
????????????...toRefs(state),
????????????changeAItemShow,
????????}
????},
}
</script>
<style>
.viewBox{
????display: flex;
}
.ArrowForAItem {
????display: flex;
????justify-content: center;
????align-items: center;
????width:10px;
????height:100%;
????background-color: lightblue;
????cursor: pointer;
}
</style>坑58（对象深度合并、deepmerge、npm、vue3）：目标使深度合并对象，讲对象内部的对象也合并而不是覆盖。使用deepmerge包，首先安装 npm install deepmerge 。之后在组件中引入即可使用，代码如下。
<script>
import merge from 'deepmerge'
export default {
????setup() {
?? ?? ? ...
?? ?? ? merge(objA,objB)
?? ?? ? ...
? ? }
</script>坑59（element-plus、el-checkbox-group、size）：使用多选框组el-checkbox-group组件时，根据文档设置size属性为medium / small / mini，但发现无法改变大小。Checkbox 多选框文档：?Element Plus - The world's most popular Vue 3 UI framework (element-plus.org)。
翻阅了一下element-plus更新记录，发现2021.8.31发布的1.1.0-beta.8中修复了这个bug：
* Style checkbox support size prop both border or not (#3099 by @kooriookami)。
查看项目package.json，element-plus版本为1.1.0-beta.7。于是更新版本。依然无效。
（重要！在更新任何包前，最好先将更新文档看一遍，可以避免很多坑。）
之后，根据更新记录连带提到的border属性，尝试设置el-checkbox的border属性为true，发现 medium / small / mini 对应整体高度分别为 36px / 32px / 28px ，对应字体大小分别为 14px / 12px / 12px 。
而border为false时，字体大小都为14px。看来这个bug还是没修复好，暂且放下。
注意！修改的el-checkbox-group的size属性、el-checkbox的border属性，在vite热更新时不会即刻生效，需要刷新页面才能看到效果。
坑60（el-form、inline模式、元素高度不统一、元素垂直间距不统一）：在inline为true，即设置为行内表单模式的el-from中放置了el-input、el-checkbox-group、el-radio-group，size在el-form中统一设置为small。遇到各元素高度不等的问题，测量整个元素和最外层包裹的el-form-item，实际输入框高度为 32px / 33px 、选择组高度为 39px / 39px 。而在el-form外时，size为small的输入框和选择组高度均为32px。解决方案主要是从font-size、line-height下手，代码如下。
//设置背景颜色方便查看，内距设置出于美观考虑
.isFrom {
????background-color: wheat;
????padding: 10px 10px;
}
//设置表单中各元素外距，边框方便查看
//注意，不可在此直接设置统一的height，会导致表单中各元素内部换行时格式错乱
.isFrom > * {
????margin: 5px 20px 5px 15px !important;
????outline: thistle 1px solid;
}
//重要，设置输入框字体大小，14px不会撑大输入框，并且与选择组中的字体大小相同
//而原先的字体大小来自.el-input--small中font-size: 13px
//非常神奇，比14px小的13px反而会将外层的el-form-item撑大1px
//具体原因有待探索
.isInput {
????max-width: 200px;
????font-size: 14px;
}
//重要，设置选择组行高，14px不会撑大选择组，并且与选择组中的字体大小相同
//而原先的行高来自.el-form-item--small .el-form-item__content中line-height: 32px
//这一行高会使选择组高度撑到39px
.isSelectbox {
????line-height: 14px !important ;
}
//较重要，选择组内各选项外距设置，与高度关联，故上下都设为0
.isSelectbox > * {
????margin: 0 10px 0 0 !important ;
}之后，还有一个元素垂直间距不等的问题，这一问题主要发生在输入框与选择组同行的时候。间距不是margin设置的上下分别5px即总共10px，而是会变成12px。效果如下图。
（2021.9.2更新了解决方案，见最后）该问题尚未解决。记录一点情况，form默认的display属性是block。
测量元素间距的工具是插件Better Ruler。
Edge浏览器直接下载扩展，链接：?Better Ruler - Microsoft Edge Addons?。
火狐浏览器也可以直接下载扩展，链接： Better Ruler – 下载 🦊 Firefox 扩展（zh-CN） (mozilla.org)
2021.9.2更新：
解决了元素垂直间距不等的问题。
首先了解一下问题产生的原因，form是块级元素display: block，其内元素默认的垂直对齐方式是基线baseline对齐。而相同高度的输入框与选择组的基线位置并不相同。
解决方法：设置form中的子元素（重点！！）的 vertical-align 属性为 top / middle / bottom即可。vertical-align属性的作用是指定行内元素（inline）或表格单元格（table-cell）元素的垂直对齐方式。代码如下：
.isFrom > * {
????vertical-align: middle;
}与之前的代码相结合即可完美达成整齐的表单效果，如下图。
坑：之前也尝试设置vertical-align，但一直无效果，原因是设置在了父元素form上，但vertical-align不可继承，必须设置在需要进行排列的子元素上。
参考： vertical-align你为什么不生效 - 基德的蒸汽朋克 - 博客园 (cnblogs.com)
vertical-align到底怎么用 - 简书 (jianshu.com)
前端基础问题：CSS vertical-align 与基线的那些事~ - Du9191 - 博客园 (cnblogs.com)
vertical-align文档：vertical-align - CSS（层叠样式表） | MDN (mozilla.org)
by 莫得感情踩坑机(限定)