Salesforce LWC学习(三十七) Promise解决progress-indicator的小问题
本篇参考: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的小问题的更多相关文章
- Salesforce LWC学习(三十九) lwc下quick action的recordId的问题和解决方案
本篇参考: https://developer.salesforce.com/docs/component-library/bundle/force:hasRecordId/documentation ...
- Salesforce LWC学习(三十) lwc superbadge项目实现
本篇参考:https://trailhead.salesforce.com/content/learn/superbadges/superbadge_lwc_specialist 我们做lwc的学习时 ...
- Salesforce LWC学习(三) import & export / api & track
我们使用vs code创建lwc 时,文件会默认生成包含 template作为头的html文件,包含了 import LightningElement的 js文件以及对应的.js-meta.xml文件 ...
- Salesforce LWC学习(三十五) 使用 REST API实现不写Apex的批量创建/更新数据
本篇参考: https://developer.salesforce.com/docs/atlas.en-us.224.0.api_rest.meta/api_rest/resources_compo ...
- Salesforce LWC学习(三十六) Quick Action 支持选择 LWC了
本篇参考: https://developer.salesforce.com/docs/component-library/documentation/en/lwc/lwc.use_quick_act ...
- Salesforce LWC学习(三十一) Quick Action适配
本篇参考:https://www.lightningdesignsystem.com/components/modals/ 随着salesforce lwc的优化,越来越多的项目从aura转到了lwc ...
- Salesforce LWC学习(三十二)实现上传 Excel解析其内容
本篇参考:salesforce lightning零基础学习(十七) 实现上传 Excel解析其内容 上一篇我们写了aura方式上传excel解析其内容.lwc作为salesforce的新宠儿,逐渐的 ...
- Salesforce LWC学习(三十四) 如何更改标准组件的相关属性信息
本篇参考: https://www.cnblogs.com/zero-zyq/p/14548676.html https://www.lightningdesignsystem.com/platfor ...
- Salesforce LWC学习(三十八) lwc下如何更新超过1万的数据
背景: 今天项目组小伙伴问了一个问题,如果更新数据超过1万条的情况下,有什么好的方式来实现呢?我们都知道一个transaction只能做10000条DML数据操作,那客户的操作的数据就是超过10000 ...
随机推荐
- Kubernetes 中的 gRPC 负载均衡
安装环境依赖 docker-desktop >= 4.1.1 kubernetes >= 1.21.5 go >= 1.17 protobuf >= 3.17.3 istioc ...
- Python-Unittest多线程执行用例
前言 假设执行一条脚本(.py)用例一分钟,那么100个脚本需要100分钟,当你的用例达到一千条时需要1000分钟,也就是16个多小时... 那么如何并行运行多个.py的脚本,节省时间呢?这就用到多线 ...
- OPA-Gatekeeper实验:对特定用户的更新时间窗口做限制
实验目的 OPA-Gatekeeper可以在Kubernetes 中,通过策略来实现一些额外的管理.安全方面的限制,例如:限制特定用户在 Namespace 中的行为权限 本次实验将在test命名空间 ...
- [noi1755]Trie
定义S对应的数组为$a_{i}=\min_{0\le j<i,S_{j}=S_{i}}i-j$,特别的,若不存在j,令$a_{i}=i$,那么容易发现存在双射关系就意味这两者对应的数组相同 因此 ...
- 洛谷 P3343 - [ZJOI2015]地震后的幻想乡(朴素状压 DP/状压 DP+微积分)
题面传送门 鸽子 tzc 竟然来补题解了,奇迹奇迹( 神仙题 %%%%%%%%%%%% 解法 1: 首先一件很明显的事情是这个最小值可以通过类似 Kruskal 求最小生成树的方法求得.我们将所有边按 ...
- 感谢 git
今天对程序大修了一下,顺便把所有算例测试了一遍,突然发现二维浅水方程有些算例出现了明显的错误. 这次突然出现的错误让我有点措手不及,因为一直没有修改过浅水方程求解器,所以这些算例很久没有测试过了.硬着 ...
- 【豆科基因组】小豆(红豆)adzuki bean, Vigna angularis基因组2015
目录 一.来源 研究一:Draft genome sequence of adzuki bean, Vigna angularis 研究二:Genome sequencing of adzuki be ...
- 在WEB网页上模拟人的操作(批量操作)
思路:selenium IDE网页测试工具+firefox浏览器=>录制网页操作脚本->导出为Perl/python/Ruby/C/R等语言 参考: (1)selenium IDE网页测试 ...
- 学习Java的第四天
一.今日收获 1.java完全手册的第一章 2. 1.6节了解了怎么样用记事本开发java程序 与用Eclipse开发 2.完成了对应例题 二.今日难题 1.一些用法容易与c++的混淆 2.语句还 ...
- day10 ajax的基本使用
day10 ajax的基本使用 今日内容 字段参数之choices(重要) 多对多的三种创建方式 MTV与MVC理论 ajax语法结构(固定的) 请求参数contentType ajax如何传文件及j ...