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的源代码，只是投机取巧加入了各种空格解决这个问题。效果打到预期了。

vux radio 改造为 tree 代码片段相关推荐

可以直接拿来用的15个jQuery代码片段
jQuery里提供了许多创建交互式网站的方法,在开发Web项目时,开发人员应该好好利用jQuery代码,它们不仅能给网站带来各种动画.特效,还会提高网站的用户体验. 本文收集了15段非常实用的jQue ...
VSCode自定义代码片段15——git命令操作一个完整流程
git命令操作一个完整流程 {// git'command// 15 如何自定义用户代码片段:VSCode =>左下角设置 =>用户代码片段 => 新建全局代码片段文件... =&g ...
环信即时通讯SDK集成——环信 uni-app-demo 升级改造计划——整体代码重构优化（二）
概述本次关于 uni-app 代码整体重构工作,基于上一期针对 uni-app 官网 demo 从 vue2 迁移 vue3 框架衍生而来,在迁移过程中有明显感知,目前的项目存在的问题为,项目部分代 ...
vscode配置用户代码片段（快捷键自定义代码模板）
vscode 配置用户代码片段入口如下分享两个我配置的 1.vue 文件代码初始化,有些已经注释了,可以自行调整 {// Place your snippets for Vue here. Eac ...
vscode用户代码片段
文章目录前言一.配置方法 1.快捷键打开 2.新建代码片段 3.删除代码片段 4.json文件说明 5.生成代码片段工具二.配置语法 1.官方教程 2.常用语法制表位占位符变量变量变换 ...
设置VSCode快捷键vue生成代码片段
Ctrl+Shift+P 复制下面的代码片段 {"vue-template": {"prefix": "vue-强哥的模板", //这个是模 ...
分享.NET开发中经常使用到的代码片段完全从实际项目中提取出来，也可被反反复复的重复借用...
几年前,一篇<ASP.NET开发人员经常使用的三十三种代码>非常流行,它总结了一些经常在ASP.NET开发中使用到的代码,直接可以拿来使用.今天重读这篇文章,有感而发,善于总结也是进步,于 ...
代码片段管理工具_VS代码片段：提高编码效率的最强大工具
代码片段管理工具 by Sam Williams 通过山姆·威廉姆斯 VS代码片段:提高编码效率的最强大工具 (VS Code snippets: the most powerful tool to ...
985大学的高材生只会写代码片段，丢人吗？
很多同学在学习编程的时候都会遇到各种各样的难题,比如:没有合适的资料.学习过于碎片化.资料的质量层次不齐.看了很多视频自己动手时却还是不会.接触不到完整项目.无法检测自己的编程水平是不是企业所认可的- ...

vux radio 改造为 tree 代码片段

vux radio 改造为 tree 代码片段相关推荐

最新文章

热门文章