uni-app uni-badge的text为10000时,uni-badge的宽度为52px,然后显示的值是99+,导致标记看起来过宽,希望优化一下

开发环境	版本号	项目创建方式
Windows	win11	HBuilderX

示例代码：

computed: {
width() {
// return String(this.text) * 8 + 12
return String(this.displayValue) * 8 + 12
},
}

yibo5220 1楼

更多关于uni-app uni-badge的text为10000时,uni-badge的宽度为52px,然后显示的值是99+,导致标记看起来过宽,希望优化一下的实战教程也可以访问 https://www.itying.com/category-93-b0.html

针对uni-badge显示大数值时宽度过大的问题，可以通过以下方式优化：

在computed属性中限制最大宽度：

computed: {
  width() {
    const displayText = this.displayValue === '99+' ? '99+' : String(this.displayValue);
    return Math.min(String(displayText).length * 8 + 12, 60); // 限制最大宽度为60px
  }
}

或者直接在显示值上做处理：

computed: {
  displayValue() {
    return this.text > 99 ? '99+' : this.text;
  },
  width() {
    return String(this.displayValue).length * 8 + 12;
  }
}