Salesforce LWC学习(三十七) Promise解决progress-indicator的小问题
2023-04-18 14:42:15 时间
本篇参考: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的学习来说,前端如果好,解决问题的时候会方便不少。篇中有错误地方欢迎指出,有不懂欢迎留言。
相关文章
- 城市级智慧停车解决方案
- C++ 学习笔记(八)(类篇二)
- DEPPN:Document-level Event Extraction via Parallel Prediction Networks 论文解读
- web3学习博客目录大全
- 【MAC】vscode C++环境配置学习以及问题解决
- C++ 学习笔记——五、内存模型和名称空间
- HTML5新特性、CSS3新特性看这一篇就够啦,可用于快速回顾知识,面试首选
- 格密码学习笔记(五):对偶格
- 华为交换机端口隔离看这一篇文章就行了
- 监控摄像头接入GB28181平台实现监控视频直播的详细搭建流程
- 联邦学习简单理解
- 面试知识点梳理及相关面试题(十二)-- linux
- 源码解析 Handler 面试宝典
- SaaS运维平台 云HIS系统源码 一体化电子病历系统
- 机器学习笔记之集成学习(二)Bagging
- INS防封号技巧,这些注意事项如果你不知道容易被封号停用
- 为什么软件测试面试了几个月都没有offer,从HR角度分析
- 【学习笔记】《Writing Science》1-9
- 2023软件测试转行现状:IT互联网人坦白局...
- 中科图新智慧管网综合管理平台