vux radio 改造为 tree 代码片段

思路:用全角空格和半角空格做区分。
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的源代码,只是投机取巧加入了各种空格解决这个问题。效果打到预期了。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值