用u-number-box替代uni-number-box是最省事的起点，因其样式可覆盖、多端兼容且API一致，仅需替换标签名即可，无需修改数据逻辑。
用 u-number-box 替代原生 uni-number-box 是最省事的起点
uni-app 官方的 uni-number-box 组件样式封闭、定制能力弱，H5 和小程序端表现还行，但 App 端（尤其 nvue）容易错位或不响应。实际项目中，u-number-box（来自 uView）是更稳妥的选择：它基于 Vue 模板实现，所有样式可覆盖，且已适配多端 flex 行为和 touch 事件差异。
关键点不是“能不能换”，而是“换完要不要改逻辑”——u-number-box 的 v-model、@change、min/max 等行为与官方组件一致，替换后只需改标签名，无需重写数据流。
- 直接替换：
<uni-number-box v-model="count"></uni-number-box>→<u-number-box v-model="count"></u-number-box> - 确保已安装 uView 并在
main.js中全局引入（非按需） - 若已有自定义样式类，先加
!important测试是否被 uView 内联样式覆盖
横向对齐失效？检查 flex 容器的 align-items 和父级 height
多端对齐问题八成出在容器层。nvue 不支持 align-items: stretch 的默认行为，而 H5 和小程序里按钮和输入框会自动撑满父容器高度；nvue 下它们只按内容高度渲染，导致上下偏移。
解决方式不是调子元素 margin，而是统一控制容器基准线：
- 给步进器外层包裹一个
view，设display: flex; align-items: center; - 确保该容器有明确高度（比如
height: 80rpx;），不能依赖子元素撑开 - 禁用 uView 默认的
line-height干扰：加样式.u-number-box { line-height: normal !important; } - 避免在 nvue 下使用
vertical-align—— 它完全无效
自定义图标和颜色时，active-color 和 icon 属性要分开处理
u-number-box 支持 plus-icon/minus-icon 传字符串（如 "add"）或 SVG 路径，但注意：这些图标在 H5 是通过字体图标渲染，在小程序是用内置 icon，App-nvue 则必须用 image 标签或 uni-icons 组件。混用会导致某端图标消失。
推荐做法是条件编译 + 统一 SVG 资源：
- H5 / 小程序端用
plus-icon="add"（走字体图标准备快） - App-nvue 端用
slot插槽手动插入<image src="/static/add.png" mode="aspectFit"></image> - 颜色统一用
active-color控制按钮高亮色，但注意 nvue 不支持渐变色，仅接受纯色值如#007AFF - 禁用状态下的颜色需额外写 CSS：
.u-number-box--disabled .u-number-box__btn { opacity: 0.5; }
nvue 下输入框光标错位？别碰 input 的 padding 和 line-height
nvue 的 text input 渲染引擎（Yoga）对 padding 解析不稳定，尤其左右 padding 不等时，光标会偏左或偏右；line-height 更是完全忽略。这是跨端最隐蔽的坑。
实操建议只有两条：
- 输入框内边距全用
padding-left和padding-right显式声明，且值必须相等（如都设20rpx） - 文字垂直居中靠
height和font-size差值控制，例如height: 60rpx; font-size: 28rpx;，中间留出足够空白 - 绝对不要在 nvue 中给
input设line-height，它会被静默丢弃 - 如果用了 uView 的
u-input套壳，记得关掉它的border和clearable，这些功能在 nvue 下易引发重绘异常
多端对齐不是靠“调一次就完事”，而是把 nvue 当作独立平台来约束写法——它不认的属性，就别写；它认的，就写死。否则每次发版前真机测三端，光标歪了、按钮下沉、数字挤出框，都是同一类问题反复出现。
