A pitfall of uniapp: Determine the string length and automatically adjust the tab width

Use dynamic:class to determine the word length and adjust the width of the tab uni-data-select

//html
<view>
      <view 
        style="width:100%" 
        :class="checkLength(text)>4 ? 'textexplode':''textshrink">
        
            <uni-data-select 
            v-model="value" 
            :localdata="rangeTag" 
            @change="changeStyleTag" 
            :clear="false">
            </uni-data-select>
      </view>
</view>

//data
// Tag选项卡
value: 0, // 默认index当前索引
rangeTag: [
     { value: 0, text: "xxxxxxx" },
     { value: 1, text: "xxx" },
     ],
text: '',


// 首次加载页面
onLoad () {
    this.rangeTag.map(v => {
      if (this.value == v.value) {
        this.text = v.text
      }
    })
  },


methods: {
    // 选项卡点击事件
    changeStyleTag (e) {
      //console.log('changeStyleTag', e)
      this.rangeTag.map(v => {
        if (e == v.value) {
          this.text = v.text
        }
      })
      //console.log(this.text, 'this.text');
    },
    /**
    * 获取字符串字节长度
    * @param {String}
    * @returns {Boolean}
    */
    checkLength (v) {
      const realLength = v.length;
      //console.log(v.length);
      return realLength;
    },
 }
 
//css
// 宽度扩展
.textexplode {
  width: 100%;
}
// 宽度收缩
.textshrink {
  min-width: 65%;
}

---

Previous article, 

The project that vue2 has pitted: v-if/else branches must use unique keys._Yi Chu’s Blog-CSDN Blog The project that vue2 has pitted: v-if/else branches must use unique keys.error: v-if/else branches must use unique keys.if The key of else cannot be the same. The key in the else tag is gradually increased by 1 https://blog.csdn.net/weixin_43928112/article/details/131834353?spm=1001.2014.3001.5501