直接改u-number-box样式会导致三端对齐错位等问题，根本原因是各端input/button默认样式重置逻辑和盒模型计算不一致；应改用插槽+flex容器统一控制尺寸与对齐，并在多端做针对性校验与禁用处理。
直接用 u-number-box 或原生 uni-number-box 组件改样式，90% 的人会在小程序/H5/App 三端出现对齐错位、按钮点击区域失效、输入框光标偏移等问题。根本原因不是组件不好，而是各端对 input、button 的默认样式重置逻辑和盒模型计算方式不一致。
为什么直接覆盖 CSS 类会失效
uni-app 编译后，不同平台对 class 的处理差异极大：微信小程序会把 scoped 样式转成唯一 hash 类名并强绑定；H5 端走标准 CSS 层叠；App 端（尤其是 iOS）还会受原生渲染层干扰，比如 line-height 在 input 里被忽略、padding 被自动压缩。
- 常见现象：
.u-number-box__input在 H5 里加padding: 8rpx有效，但在小程序里输入框上下留白消失，光标贴顶 - 根本原因：小程序 WebView 对
input的box-sizing默认为border-box，而 H5 是content-box，App 端则可能完全绕过 CSS 直接映射到原生控件属性 - 解决思路：不依赖组件内部 class，改用插槽 + 自定义容器控制尺寸和对齐
用插槽 + flex 容器实现跨端对齐
抛弃对组件内部类的 hack，把整个步进器结构收归自己控制。核心是用 slot 替换默认按钮，并用固定高度+flex 垂直居中来统一 baseline。
- 给容器设固定
height（如64rpx），避免各端自动计算差异 - 用
display: flex; align-items: center;包裹输入框和两个按钮，强制垂直居中 - 按钮用
view而非button，规避小程序 button 的 padding 强制重置 - 输入框设置
line-height: 1+height: 100%+text-align: center，防止文字上下偏移
<u-number-box v-model="value" :min="0" :max="99">
<template #left>
<view class="step-btn" @tap="decrease">−</view>
</template>
<template #right>
<view class="step-btn" @tap="increase">+</view>
</template>
</u-number-box>配套样式必须写死高度和行高：
.step-btn {
width: 48rpx;
height: 48rpx;
line-height: 48rpx;
text-align: center;
font-size: 28rpx;
}
.u-number-box__input {
height: 100%;
line-height: 1;
text-align: center;
padding: 0;
}整数限制与小数精度在多端的表现差异
integer 属性只控制输入行为，但 H5 的 input[type="number"] 允许粘贴小数，小程序会自动截断，App 端（Android）可能允许输入但提交时校验失败——这会导致用户以为操作成功，实际值被静默修正。
- 不要只靠
integer，在@change回调里用Math.round()或正则过滤：value = value.toString().replace(/[^0-9]/g, '') - 若需保留一位小数，
:decimal="1"在 H5 有效，但小程序不支持该 prop，得手动监听input事件做格式化 - App 端对
step属性支持不稳定，建议在@change中做二次校验：if (value % step !== 0) value = Math.round(value / step) * step
禁用状态下的视觉一致性
:disabled="true" 在 H5 和 App 上会灰化整个组件，但小程序只会禁用按钮，输入框仍可聚焦——这是平台渲染机制导致的，无法靠 CSS 统一。
- 必须同时设置
:disabledInput="true"+:disablePlus="true"+:disableMinus="true" - 禁用态颜色不能只改
color，要连同background-color、border-color一起设，否则小程序里按钮背景还是默认色 - 真机测试重点：iOS App 禁用按钮点击反馈（震动/按压动画）仍可能存在，需用
pointer-events: none强制关闭
最麻烦的不是写代码，是验证——每次改完样式，必须在微信开发者工具、Chrome 模拟器、iOS 真机、Android 真机四端逐个点开输入框看光标位置、按钮热区、数字对齐是否一致。差 2rpx 就可能让用户觉得“这个 App 做得很糙”。
