Uma armadilha do uniapp: determine o comprimento da string e ajuste automaticamente a largura da guia

Use dynamic:class para determinar o comprimento da palavra e ajustar a largura da guia 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%;
}

---

Artigo anterior, 

Projeto armadilha vue2: ramificações v-if/else devem usar chaves exclusivas._Yi Chu’s Blog-CSDN Blog Projeto armadilha vue2: ramificações v-if/else devem usar chaves exclusivas.erro: ramificações v-if/else devem usar chaves exclusivas.if A chave de else não pode ser a mesma. A chave na tag else é gradualmente aumentada em 1 https://blog.csdn.net/weixin_43928112/article/details/131834353?spm=1001.2014.3001.5501