关于前端:StepsGuide一个像跟屁虫一样的组件-DevUI

73次阅读

共计 5637 个字符，预计需要花费 15 分钟才能阅读完成。

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 我的项目吧！》

正文完
前端
发表至： 前端
2021-06-08
 0
关于前端:命令行操作生产svg动图
关于前端:JavaScript高级程序设计学习笔记二-JS-继承的六种方式
关于前端:Vue关于实例中为什么只能有一个根元素
关于前端:GitHub-特定文件夹或文件下载工具