Skip to content

[Bug]: weapp VButton 文字在原生 button 上未垂直居中 #10

Description

@daguanren21

版本

@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 文本会偏上或偏左,看起来没有垂直居中。

登录页三个满宽圆角按钮(左图标、中间文案)尤其明显。

复现

  1. 在 wevu 页面使用:
<VButton block size="lg" shape="round">
  <text>抖音一键登录</text>
</VButton>
  1. 用微信开发者工具真机预览或模拟器查看。
  2. 对比猫箱登录按钮:图标绝对靠左,文案在按钮几何中心,水平垂直都居中。

预期

原生 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 参与主轴把文字挤偏。

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions