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

原创

已于 2023-08-25 09:21:31 修改 · 1.8k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app

于 2023-08-14 16:34:25 首次发布

文章介绍了如何使用Vue中的动态class来根据字符串长度调整uni-data-select组件的宽度，以及避免在v-if/else分支中使用相同key的注意事项。

利用动态: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
        }
      })
      //conso