uniapp踩坑之项目：判断字符串长度自动调整选项卡宽度

利用动态:class来判断字长调整选项卡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%;
}

---

上一篇文章， 

vue2踩坑之项目：v-if/else branches must use unique keys._意初的博客-CSDN博客vue2踩坑之项目：v-if/else branches must use unique keys.error: v-if/else branches must use unique keys.if 与 else 的 key 不能相同，在else标签里的key逐步加1https://blog.csdn.net/weixin_43928112/article/details/131834353?spm=1001.2014.3001.5501