版本
@varo-ui/weapp@2.0.0,weapp 主题 packages/cli/registry/themes/base/weapp-vite.css(当前 main)。
问题
weapp VButton 渲染为原生 <button>。主题只设置了 display: inline-flex; align-items: center; justify-content: center; padding: 0 16px; line-height: 1。
微信原生 button 自带默认 padding 和 ::after 边框。flex + line-height: 1 压不住宿主默认盒模型,slot 文本会偏上或偏左,看起来没有垂直居中。
登录页三个满宽圆角按钮(左图标、中间文案)尤其明显。
复现
- 在 wevu 页面使用:
<VButton block size="lg" shape="round">
<text>抖音一键登录</text>
</VButton>
- 用微信开发者工具真机预览或模拟器查看。
- 对比猫箱登录按钮:图标绝对靠左,文案在按钮几何中心,水平垂直都居中。
预期
原生 button 上的默认内容应水平垂直居中。data-block="true" 时宽度 100%。带左侧 icon slot 时,icon 不把文案整体推向右侧。
实际
文案相对按钮高度偏上,带 icon 时整组内容靠左。没有重置:
box-sizing: border-box
margin: 0
- 宿主默认 padding
button::after { border: 0 }
- 明确的
line-height / 内容盒高度
建议
在 weapp 主题的 .varo-button 上补原生 button reset,并给 ::after 去边框。左侧 icon 用绝对定位或独立内容层,文案层单独 flex: 1 居中,避免 icon 参与主轴把文字挤偏。
版本
@varo-ui/weapp@2.0.0,weapp 主题packages/cli/registry/themes/base/weapp-vite.css(当前main)。问题
weapp
VButton渲染为原生<button>。主题只设置了display: inline-flex; align-items: center; justify-content: center; padding: 0 16px; line-height: 1。微信原生
button自带默认 padding 和::after边框。flex +line-height: 1压不住宿主默认盒模型,slot 文本会偏上或偏左,看起来没有垂直居中。登录页三个满宽圆角按钮(左图标、中间文案)尤其明显。
复现
预期
原生
button上的默认内容应水平垂直居中。data-block="true"时宽度 100%。带左侧 icon slot 时,icon 不把文案整体推向右侧。实际
文案相对按钮高度偏上,带 icon 时整组内容靠左。没有重置:
box-sizing: border-boxmargin: 0button::after { border: 0 }line-height/ 内容盒高度建议
在 weapp 主题的
.varo-button上补原生 button reset,并给::after去边框。左侧 icon 用绝对定位或独立内容层,文案层单独flex: 1居中,避免 icon 参与主轴把文字挤偏。