本篇参考:https://developer.salesforce.com/docs/component-library/bundle/lightning-progress-indicator/example

我们在实际项目中有的时候要使用展示类似opportunity path的这种进度的标签,当然 lwc已经给做好了标签和demo,我们第一版进行一个简单的制作。直接上代码

testProgressIndicator.html

<template>
<lightning-card title="path demo">
<lightning-layout>
<lightning-layout-item size="12" class="slds-float--right">
<lightning-button onclick={handlePreviousStepAction} variant="brand" label="Previous" disabled={disablePrevious} class="slds-m-right_x-small slds-no-flex text-right ">
</lightning-button>
<lightning-button onclick={handleNextStepAction} variant="brand" label="Next" disabled={disableEnd} class="slds-m-right_x-small slds-no-flex text-right ">
</lightning-button>
</lightning-layout-item>
</lightning-layout>
<lightning-progress-indicator current-step={currentStep} type="path" >
<template for:each={stepsForProgress} for:item="step">
<lightning-progress-step label={step.label} value={step.value} key={step.label}></lightning-progress-step>
</template>
</lightning-progress-indicator>
</lightning-card>
</template>

testProgressIndicator.js

import { LightningElement, track, wire } from 'lwc';
const testSteps = [
{ label: 'step1', value: 'step1' },
{ label: 'step2', value: 'step2' },
{ label: 'step3', value: 'step3' },
{ label: 'step4', value: 'step4' },
{ label: 'step5', value: 'step5' }
];
export default class testProgressIndicator extends LightningElement {
@track stepsForProgress = testSteps;
@track currentStep = 'step1';
@track disablePrevious = true;
@track disableEnd = false; renderedCallback() {
if(this.currentStep === 'step1') {
this.disablePrevious = true;
this.disableEnd = false;
} else if(this.currentStep === 'step5') {
this.disablePrevious = false;
this.disableEnd = true;
} else {
this.disablePrevious = false;
this.disableEnd = false;
}
} handlePreviousStepAction() {
let step = this.currentStep;
this.currentStep = ''; if(step === 'step2') {
this.currentStep = 'step1';
} else if(step === 'step3') {
this.currentStep = 'step2';
} else if(step === 'step4') {
this.currentStep = 'step3';
} else if(step === 'step5') {
this.currentStep = 'step4';
}
} handleNextStepAction() {
let step = this.currentStep;
if(step === 'step1') {
this.currentStep = 'step2';
} else if(step === 'step2') {
this.currentStep = 'step3';
} else if(step === 'step3') {
this.currentStep = 'step4';
} else if(step === 'step4') {
this.currentStep = 'step5';
}
}
}

演示效果:

初始化没有问题

当点击一次next的时候,step1成功的变成了绿色,但是当又一次点击next的时候,我们发现step2没有变成绿色。

问题分析,可能实时的设置current step的值时,progress-indicator是异步加载,所以渲染出现问题。

我们知道,js中的执行顺序是 顺序执行 > Promise > timeout异步,所以我们优化一下代码,设置current step的值使用 Promise的方式设置。在 previous / next的函数中使用Promise的方式来搞定。

import { LightningElement, track, wire } from 'lwc';
const testSteps = [
{ label: 'step1', value: 'step1' },
{ label: 'step2', value: 'step2' },
{ label: 'step3', value: 'step3' },
{ label: 'step4', value: 'step4' },
{ label: 'step5', value: 'step5' }
];
export default class testProgressIndicator extends LightningElement {
@track stepsForProgress = testSteps;
@track currentStep = 'step1';
@track disablePrevious = true;
@track disableEnd = false; renderedCallback() {
if(this.currentStep === 'step1') {
this.disablePrevious = true;
this.disableEnd = false;
} else if(this.currentStep === 'step5') {
this.disablePrevious = false;
this.disableEnd = true;
} else {
this.disablePrevious = false;
this.disableEnd = fale;
}
} handlePreviousStepAction() {
let step = this.currentStep;
this.currentStep = '';
const previousStepPromise = () =>
new Promise((resolve, reject) => {
resolve(step);
}); previousStepPromise()
.then((result) => {
if(step === 'step2') {
this.currentStep = 'step1';
} else if(step === 'step3') {
this.currentStep = 'step2';
} else if(step === 'step4') {
this.currentStep = 'step3';
} else if(step === 'step5') {
this.currentStep = 'step4';
}
});
} handleNextStepAction() {
let step = this.currentStep;
const nextStepPromise = () =>
new Promise((resolve, reject) => {
resolve(step);
});
this.currentStep = ''; nextStepPromise()
.then((result) => {
if(result === 'step1') {
this.currentStep = 'step2';
} else if(result === 'step2') {
this.currentStep = 'step3';
} else if(result === 'step3') {
this.currentStep = 'step4';
} else if(result === 'step4') {
this.currentStep = 'step5';
}
});
}
}

结果展示:现在效果就是正常的了。

总结:我们在lwc的使用中,除了这个以外,关于以前 datatable翻页篇也同样使用Promise的方式来解决了问题。lwc的学习来说,前端如果好,解决问题的时候会方便不少。篇中有错误地方欢迎指出,有不懂欢迎留言。

Salesforce LWC学习(三十七) Promise解决progress-indicator的小问题的更多相关文章

  1. Salesforce LWC学习(三十九) lwc下quick action的recordId的问题和解决方案

    本篇参考: https://developer.salesforce.com/docs/component-library/bundle/force:hasRecordId/documentation ...

  2. Salesforce LWC学习(三十) lwc superbadge项目实现

    本篇参考:https://trailhead.salesforce.com/content/learn/superbadges/superbadge_lwc_specialist 我们做lwc的学习时 ...

  3. Salesforce LWC学习(三) import & export / api & track

    我们使用vs code创建lwc 时,文件会默认生成包含 template作为头的html文件,包含了 import LightningElement的 js文件以及对应的.js-meta.xml文件 ...

  4. Salesforce LWC学习(三十五) 使用 REST API实现不写Apex的批量创建/更新数据

    本篇参考: https://developer.salesforce.com/docs/atlas.en-us.224.0.api_rest.meta/api_rest/resources_compo ...

  5. Salesforce LWC学习(三十六) Quick Action 支持选择 LWC了

    本篇参考: https://developer.salesforce.com/docs/component-library/documentation/en/lwc/lwc.use_quick_act ...

  6. Salesforce LWC学习(三十一) Quick Action适配

    本篇参考:https://www.lightningdesignsystem.com/components/modals/ 随着salesforce lwc的优化,越来越多的项目从aura转到了lwc ...

  7. Salesforce LWC学习(三十二)实现上传 Excel解析其内容

    本篇参考:salesforce lightning零基础学习(十七) 实现上传 Excel解析其内容 上一篇我们写了aura方式上传excel解析其内容.lwc作为salesforce的新宠儿,逐渐的 ...

  8. Salesforce LWC学习(三十四) 如何更改标准组件的相关属性信息

    本篇参考: https://www.cnblogs.com/zero-zyq/p/14548676.html https://www.lightningdesignsystem.com/platfor ...

  9. Salesforce LWC学习(三十八) lwc下如何更新超过1万的数据

    背景: 今天项目组小伙伴问了一个问题,如果更新数据超过1万条的情况下,有什么好的方式来实现呢?我们都知道一个transaction只能做10000条DML数据操作,那客户的操作的数据就是超过10000 ...

随机推荐

  1. 3组-Alpha冲刺-2/6

    一.基本情况 队名:发际线和我作队 组长博客:链接 小组人数:10 二.冲刺概况汇报 黄新成(组长) 过去两天完成了哪些任务 文字描述 在校内外进行了数据采集,采集了多场景的数据,并进行了帧分割. 展 ...

  2. PAT A1091——BFS

    Acute Stroke One important factor to identify acute stroke (急性脑卒中) is the volume of the stroke core. ...

  3. 【Java】运行时Java对象在内存中是如何存储的?

    翻译自这一篇文章 我们知道函数在内存中实现为一个活动记录的栈.我们也知道Java方法在JVM栈区中实现为一个帧栈而Java对象是在堆区进行分配的. Java对象在堆内存中是怎样的呢?一旦对象保存在内存 ...

  4. IDEA修改XML注释风格

    作为一个强迫症患者,每次想在xml文件用快捷键注释的时候,它自动生成的注释一直都是这样的:这令我非常难受,于是每次我都要把光标移到前面,然后再Tab以下,让它变成这样可是每次都这样,好麻烦啊,如果自己 ...

  5. airTest小程序自动化踩坑记(android设备)

    一:怎么开启微信小程序的webview调试定位元素 操作如下(android设备): 1.打开X5内核的方法在聊天窗口任意输入"http://debugx5.qq.com" 点击& ...

  6. mybatis判断集合长度

    使用mybatis框架在写sql的时候碰到一个异常: 1064 - You have an error in your SQL syntax; check the manual that corres ...

  7. Go语言核心36讲(Go语言实战与应用十九)--学习笔记

    41 | io包中的接口和工具 (下) 上一篇文章中,我主要讲到了io.Reader的扩展接口和实现类型.当然,io代码包中的核心接口不止io.Reader一个. 我们基于它引出的一条主线,只是io包 ...

  8. CF1264D2 Beautiful Bracket Sequence (hard version)

    考虑\(D1\)的\(O(n^2)\),我们直接进行组合处理. 考虑在\(p\)这个位置,左边有\(l\)个(,右边有\(r\)个),左边有\(l\)个问号,右边有\(r\)个问号. 这个位置的贡献为 ...

  9. 洛谷 P4088 [USACO18FEB] Slingshot P(线段树+二维数点)

    题目链接 题意:有一个数轴,上面有 \(n\) 个传送门,使用第 \(i\) 个传送门,你可以从 \(x_i\) 走到 \(y_i\),花费的时间为 \(t_i\) 秒.你的速度为 \(1\) 格/秒 ...

  10. 洛谷 P6060 - [加油武汉]传染病研究(数论)

    洛谷题面传送门 一道不算太难的题,题解稍微写写吧( 首先根据约数个数和公式,对于一个 \(n=p_1^{\alpha_1}·p_2^{\alpha_2}·\cdots·p_m^{\alpha_m}\) ...