StepsGuide-一个像跟屁虫一样的组件-DevUI.docx

? ? StepsGuide 一个像跟屁虫一样的组件-DevUI ? ? 【摘要】 DevUI 是一款面向企业中后台产品的开源前端解决方案，它倡导沉浸、灵活、至简的设计价值观，提倡设计者为真实的需求服务，为多数人的设计，拒绝哗众取宠、取悦眼球的设计。如果你正在开发 ToB 的工具类产品，DevUI 将是一个很不错的选择！ 引言近期对 ProjectMan 业务的工作项搜索/过滤功能做了优化，用 DevUI 组件库新推出的 CategorySearch 组件替换了之前复杂繁琐... DevUI 是一款面向企业中后台产品的开源前端解决方案，它倡导沉浸、灵活、至简的设计价值观，提倡设计者为真实的需求服务，为多数人的设计，拒绝哗众取宠、取悦眼球的设计。如果你正在开发 ToB 的工具类产品，DevUI 将是一个很不错的选择！ 引言 近期对 ProjectMan 业务的工作项搜索/过滤功能做了优化，用 DevUI 组件库新推出的 CategorySearch 组件替换了之前复杂繁琐的交互方式，实现了搜索、过滤、过滤条件显示3个功能的整合，能够有效提升用户的操作效率和体验。 以下是新旧过滤器的效果对比： 旧版过滤器 新版过滤器 从新旧过滤器的对比可以看出，两者相差很大，这个旧版的过滤器已经在线上运行多年，用户已经习惯了这种交互方式，如果贸然上一个几乎是全新的东西，势必会挑战用户的使用习惯，即使新版过滤器拥有简单易用、操作效率高、体验好等众多优点。 由于要改变用户习惯，前期很可能还是会受到部分用户的排斥和抵触，为了尽可能让用户平滑过渡到新版过滤器，需要增加一个简单的用户指引，让用户通过几个简单的步骤，快速了解新版过滤器的使用方式。 1 单步骤用户指引 用户指引应该是一个比较通用的场景，先到组件库里找下有没有可以直接用的组件。 1.1 寻找合适的组件 打开DevUI官网的组件总览页面： https://devui.design/components/zh-cn/overview 先尝试搜索?关键字指引，找到一个操作指引组件： 点击进入StepsGuide组件的详情页面： 何时使用里写了该组件的使用场景： 业务推出新特性，或复杂的业务逻辑需要指引用户时使用。 和我们的场景是一样的，直接拿来用吧。 1.2 看组件Demo，了解组件基本用法 先看下第一个基本用法的Demo： d-button bsStyle=common dStepsGuide [pageName]=step-basic-demo [steps]=steps [stepIndex]=0 [dStepsGuidePosition]=top (operateChange)=operateChange($event) (click)=reset(0) Step 1/d-button 从这个Demo，我们大致可以一窥其使用方式： 以指令（dStepsGuide）的方式使用 指令放在哪个元素上，就在它上面展示一个指引框 dStepsGuidePosition属性应该是控制指引框的位置 steps应该是配置指引步骤数据源 stepIndex应该是表示当前的元素是第几个步骤 pageName暂时还不知道有什么用 operateChange是一个事件，还不知道有什么用 看完HTML文件，再看下TS文件： export class BasicComponent implements OnInit { ... steps = [ { title: Step 1, content: Guide Content, }, { title: Step 2, content: Guide Content, }, { title: Step 3, content: Guide Content, }, ]; constructor(private stepService: StepsGuideService) {} ngOnInit() { this.stepService.currentIndex.subscribe((index) = (this.currentStep = index)); /* 由于整个demo是在一个页面内显示多个操作指引序列，因此需要在初始化时重置显示状态 */ localStorage.setItem(devui_guide_step-position-demo, 0); localStorage.setItem(devui_gu