diff --git a/components/ns-form/ns-form.vue b/components/ns-form/ns-form.vue index 312c3a9..548a053 100644 --- a/components/ns-form/ns-form.vue +++ b/components/ns-form/ns-form.vue @@ -37,6 +37,19 @@ > + + + + + + @@ -420,6 +434,26 @@ 'line-height': this.$util.rpx(this.config.inputHeight) }); }, + // textarea 专用 inline style(仅微信小程序端使用,见 template 中 #ifdef MP-WEIXIN 分支) + // 设计要点: + // 1) 不复用 inputStyle 的 min-height / line-height:这两个值取自 inputHeight(默认 60rpx), + // 对 textarea 太小,会让微信小程序原生 textarea 单行过高、可视区域过小, + // 内容稍多即溢出导致原生滚动条 thumb 异常小; + // 2) 不使用 auto-height:在微信小程序原生 textarea 上,auto-height 会让 textarea 随内容 + // 无限扩展,遮挡后续组件,导致"看不到下面的其他组件"; + // 3) 改用固定 height 176rpx(约 4 行,line-height 44rpx),相比原 CSS height: 88rpx(2 行) + // 可视区域翻倍,内容多时内部滚动条 thumb 比例改善一倍,且高度可控不会遮挡后续组件。 + textareaStyle() { + const h = this.$util.rpx(176); + return this.$util.objToStyle({ + 'height': h, + 'min-height': h, + 'line-height': this.$util.rpx(44), + 'border-radius': this.$util.rpx(this.config.inputRadius), + 'font-size': this.$util.rpx(this.config.labelFontSize), + 'color': this.config.labelColor + }); + }, // 必填星号颜色 requiredColor() { return this.config.requiredColor;