利用动态: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%;
}