fix(checkbox): #1323 修复checkboxGroup下，组件底部遮挡问题

[xzxldl55]

修复过程

问题原因

在部分浏览器的渲染下 checkbox icon 会向下偏移1px，就拿文档例子说，16px盒子大小，checkbox icon也为 16 * 16，向下偏移1px，且最外部容器在分组（group）下，会添加overflow： hidden; 样式 【.devui-checkbox__wrap .devui-checkbox label】，所以呈现的就是显示不全的情况。

兼容性Tips：目前在Windows下能够复现，Mac下Chrome无法复现（104.0），maybe 新版本修复了这个向下偏移的问题？

修复思路

既然正常默认文档流的情况，checkbox - icon 在部分情况会向下偏移1px，那么我们让他不偏移即可。

这里我们将外部容器 label，修改为flex（原为block），并令子元素始终垂直居中 align-items: center; 即可。

• 其他带来问题修复：

  • 原来的label文字是直接作为文字标签放到label中的，所以在label上设置的ellipsis是有效的，但label改为flex后，内部文字标签，会遵循弹性和模型子元素规则， 长度超过时会造成长度溢出。这里我们需要对文字标签进一步设置。
  • 1. 将文字标签用span包裹起来（主要取个名字好设置css），设置css flex-shrink: 1; 令其会自动按照父级flex盒子大小缩减。
  • 2. 同时要同步为 checkbox icon 标签设置样式 flex-shrink: 0; 让它不参与缩减，否则会被文字标签挤占宽度导致坍缩。

修复效果：

1. checkbox分组：

2. 其他checkbox情况（未受影响）：

[github-actions]

PR preview has been successfully built and deployed to https://vue-devui-pr-1343.surge.sh.

[vaebe]

由于增加了 sapn 标签，导致 transfer 组件自定义渲染内容的测试断言失败了

[kagol]

@xzxldl55 这个PR非常规范和清晰，点赞👍

[kagol]

@xzxldl55 测试用例失败了，看下是什么原因呢？

[xzxldl55]

由于增加了 sapn 标签，导致 transfer 组件自定义渲染内容的测试断言失败了

我研究下，O.o

[github-actions]

PR preview has been successfully built and deployed to https://vue-devui-pr-1343.surge.sh.

[github-actions]

PR preview has been successfully built and deployed to https://vue-devui-pr-1343.surge.sh.

[github-actions]

PR preview has been successfully built and deployed to https://vue-devui-pr-1343.surge.sh.

[xzxldl55]

@xzxldl55 测试用例失败了，看下是什么原因呢？

transfer最后一行针对 renderContent 的断言获取元素使用的 firstCheckbox.find(xxx span)[2] 来 匹配自定义渲染的文本标签。

而因为我加了一层span在text标签上，所以这里它拿到的 [2] 元素是我加的那一个元素，而不是他自定义渲染设置了颜色的text（span）元素。

这里稍作修改，将获取text元素的dom操作改为更精确的 firstCheckbox.find('.devui-checkbox__label-text span')

[github-actions]

PR preview has been successfully built and deployed to https://vue-devui-pr-1343.surge.sh.