思路:用全角空格和半角空格做区分。
1、自己写的部分
this.toOptions = arr.map(x => {
let kong = ''
for (let i = 1; i < x.level; i = i + 1) {
kong = kong + ' '
}
kong = kong + ' '
let icon = 'https://s1.ax1x.com/2018/09/27/iML0BD.png'
if (x.level === 1) {
icon = 'https://s1.ax1x.com/2018/09/27/iMLwnO.png'
}
return {
icon: icon,
key: x.key,
value: kong + x.value + `${x.level}`
}
})
2、vux的popup-radio组件改造部分
<slot name="each-item" :icon="props.icon" :label="props.label" :index="props.index">
<p>
<span>{{ props.label.split(' ')[0] }}</span>
<img class="vux-radio-icon" :src="props.icon" v-show="props.icon">
<span class="vux-radio-label">{{ props.label.split(' ')[1] }}</span>
</p>
</slot>
最后效果
没有怎么改动vux的源代码,只是投机取巧加入了各种空格解决这个问题。效果打到预期了。