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_guide_step-custom-demo', '0'); /* 设置第二个序列为不显示状态 */    localStorage.removeItem('devui_guide_step-basic-demo'); /* 设置第一个序列为显示状态 */    this.stepService.setSteps(this.steps); /* 将步骤数据设置为第一个序列的内容 */    this.stepService.setCurrentIndex(0); /* 设置以后序列显示步骤为第一个步骤 */  }  ...}

从TS文件里能够看到steps步骤数据源的构造，steps是一个对象数组，每一个数组项示意一个指引步骤，外面蕴含该步骤的题目和内容。

组件初始化事件外面写了一些逻辑，有点简单，咱们先不看。

依据现有的常识，应该能先用起来。

1.3 先用起来再说

比方我想给上面的搜寻框元素加一个指引：

大抵成果如下：

1.3.1 第一步是先引入组件模块

import { StepsGuideModule } from 'ng-devui';@NgModule({  ...  imports: [    ...    StepsGuideModule,  ],  ...})export class MainContentHeadModule { }

1.3.2 而后加上dStepsGuide指令和相应的属性

先只加一个steps试试看：

<d-search   dStepsGuide  [steps]="steps"></d-search>

steps = [  {    title: '新性能介绍：搜寻框',    content: `      <p>1、过滤性能迁徙至搜寻框中啦</p>      <p>2、在搜寻框中，您可输出关键词或增加筛选条件查问所须要的工作项</p>    `,  },];

发现什么成果都没有。

1.3.3 调整参数，达到咱们想要的成果

回过头来看组件Demo，组件初始化时做了一些事件：

  ngOnInit() {    this.stepService.currentIndex.subscribe((index) => (this.currentStep = index));    /* 因为整个demo是在一个页面内显示多个操作指引序列，因而须要在初始化时重置显示状态 */    localStorage.setItem('devui_guide_step-position-demo', '0');    localStorage.setItem('devui_guide_step-custom-demo', '0'); /* 设置第二个序列为不显示状态 */    localStorage.removeItem('devui_guide_step-basic-demo'); /* 设置第一个序列为显示状态 */    this.stepService.setSteps(this.steps); /* 将步骤数据设置为第一个序列的内容 */    this.stepService.setCurrentIndex(0); /* 设置以后序列显示步骤为第一个步骤 */  }

最初一行代码仿佛是用来管制显示哪一个步骤指引的：

this.stepService.setCurrentIndex(0); /* 设置以后序列显示步骤为第一个步骤 */

咱们加上这一行试试看。

import { StepsGuideService } from 'ng-devui';constructor(  private stepService: StepsGuideService,) {}ngOnInit(): void {  this.stepService.setCurrentIndex(0); /* 设置以后序列显示步骤为第一个步骤 */}

发现还是没成果。

再加上调用setSteps办法那一行试试：

ngOnInit(): void {  this.stepService.setSteps(this.steps); /* 将步骤数据设置为第一个序列的内容 */  this.stepService.setCurrentIndex(0); /* 设置以后序列显示步骤为第一个步骤 */}

还是不行，再试试加上stepIndex属性：

    <d-search       dStepsGuide      [steps]="steps"      [stepIndex]="0" // 新增的    ></d-search>

终于有成果了：

不过默认地位显示在元素上方，被挡住了，能够设置下dStepsGuidePosition属性，调整下指引的地位：

    <d-search       dStepsGuide      [steps]="steps"      [stepIndex]="0"      dStepsGuidePosition="bottom" // 新增的    ></d-search>

这回失常了。

成果和咱们想要的截然不同：

1.3.4 小结

回顾一下，为了实现单步骤用户指引，咱们应用了dStepsGuide指令的三个参数：

steps 步骤数组，是一个对象数组，外面蕴含步骤的题目（title）和内容（content）
stepIndex 显示第几个步骤
dStepsGuidePosition 显示地位（一共有8个方位）

为了设置以后步骤为第一个步骤，咱们调用了stepService的两个办法：

setSteps(this.steps) 将步骤数据设置为第一个序列的内容
setCurrentIndex(0) 设置以后步骤为第一个步骤

这就是实现单步骤用户指引所须要晓得的全副常识。

2 多步骤指引

这时产品说一个步骤不够，要加一个，次要有两个要求：

第一个步骤外面点击下一步，能够跳到下一个步骤
第二个步骤有一个返回上一步的按钮

为了实现多步骤指引，咱们不须要学习任何多余的API，只须要简略地在steps中减少一个步骤，并设置第二个步骤的stepIndex为1即可。

<d-search   dStepsGuide  dStepsGuidePosition="bottom"  [steps]="steps"  [stepIndex]="0"></d-search><!--新增的步骤--><d-button  dStepsGuide  dStepsGuidePosition="bottom"  [steps]="steps"  [stepIndex]="1">新建我的项目</d-button>

steps = [  {    title: '新性能介绍：搜寻框',    content: `      <p>1、过滤性能迁徙至搜寻框中啦</p>      <p>2、在搜寻框中，您可输出关键词或增加筛选条件查问所须要的工作项</p>    `,  },  // 新增的步骤  {    title: '新性能介绍：新建我的项目',    content: `      <p>点击“新建我的项目”按钮，即可跳转到新建我的项目页面</p>    `,  },];

成果如下：

是不是非常简单？

3 追随成果

以上实现会有一个问题：

如果步骤的指标元素是动态变化的，比方它的地位变了，宽高变了，指引不会跟着变。

成果如下：

这时须要用到StepsGuide组件的另一个API：observerDom

这个API会让指引步骤秒变跟屁虫：

指标元素在哪儿，指引步骤就跟到哪儿。

API文档用了大段文字来形容这个observerDom的用处，其实就是把指引步骤的浮框变成“跟屁虫”

<d-search   dStepsGuide  dStepsGuidePosition="bottom"  [steps]="steps"  [stepIndex]="0"  [observerDom]="observerDom" // 新增的></d-search>

observerDom;ngOnInit(): void {  // 新增的，把搜寻框的外层元素设置成observerDom，这样只有它外面的任何元素发生变化，导致了搜寻框地位发生变化，步骤指引的浮框都会跟着变动  this.observerDom = document.querySelector('.main-content');    this.stepService.setSteps(this.steps);  this.stepService.setCurrentIndex(0);}

成果如下：

不仅仅是搜寻框宽度变动，其余变动导致的搜寻框地位的变动也会触发步骤指引的追随：

是不是十分有意思？

接下来咱们就来看看这个简略却很有意思的“跟屁虫”组件还有哪些能力。

4 StepsGuide组件的其余API

关注StepsGuide组件的介绍，没有比它的API文档写得更分明的了。

它一共有12个属性API，一个事件API。

属性API：

steps 步骤数组
stepIndex 以后步骤索引
dStepsGuidePosition 指引步骤的地位
observerDom 追随成果
pageName 用来标识操作指引，跨页面（或路由）时会用到
leftFix 地位修复
topFix 地位修复
zIndex 指引步骤的层级
targetElement 指定指标元素，当须要为动静生成的元素增加指引时会用到
scrollElement 指引信息追随滚动定位的容器元素
scrollToTargetSwitch 是否主动滚动页面至指引信息显示的地位
extraConfig 扩大配置，用于暗藏上一步按钮和步骤圆点图标

事件API：

operateChange 指引步骤中的按钮事件，须要自定义下一步的动作时会用到

这些API的具体用法详见StepsGuide组件的Demo：

https://devui.design/components/zh-cn/steps-guide/demo

如果你的业务中也有新个性要公布，须要减少用户指引，无妨试试这个乏味的跟屁虫组件吧！

也欢送应用DevUI新公布的DevUI Admin零碎，开箱即用，10分钟搭建一个好看大气的后盾管理系统！

退出咱们

咱们是DevUI团队，欢送来这里和咱们一起打造优雅高效的人机设计/研发体系。招聘邮箱：muyang2@huawei.com。

文/DevUI Kagol

往期文章举荐

《Quill富文本编辑器的实际》

《如何解决异步接口申请快慢不均导致的数据谬误问题？》

《号外号外！DevUI Admin V1.0 公布啦！》

《CategorySearch分类搜寻组件初体验》

《让咱们一起建设 Vue DevUI 我的项目吧！》