<aura:component implements="force:lightningQuickActionWithoutHeader,force:hasRecordId,flexipage:availableForRecordHome,lightning:actionOverride">
<aura:attribute name="recordId" type="Id"/>
This is Aura RecordId is: {!v.recordId}
</aura:component>
quickActionForDeleteAuraController.js
({
})
quickActionForDeleteLwc.html
<template>
<div class="slds-modal slds-fade-in-open" style="width: 100%;">
<div class="slds-modal__container" style="width:100%;">
<header class="slds-modal__header inner">
<h2 class="title slds-text-heading--medium slds-hyphenate">Delete Opportunity</h2>
<lightning-button-icon class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse"
icon-name="utility:close" alternative-text="close" title="close" onclick={handleCancel}>
</lightning-button-icon>
</header>
<div class="slds-modal__content slds-p-around--medium">
<lightning-card style="text-align:center;">
<p class="title slds-text-heading--medium slds-hyphenate">
Are you sure you want to delete this opportunity?
</p>
</lightning-card>
</div>
<div class="slds-modal__footer">
<lightning-button onclick={handleDelete} variant="brand" label="削除" class="slds-m-right_x-small slds-no-flex text-right slds-float--right"></lightning-button>
<lightning-button onclick={handleCancel} label="キャンセル" class="slds-m-right_x-small slds-no-flex text-right slds-float--right"></lightning-button>
</div>
</div>
</div>
</template>
quickActionForDeleteLwc.js
import { LightningElement, api } from 'lwc';
import { deleteRecord } from 'lightning/uiRecordApi';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
import { NavigationMixin } from 'lightning/navigation';
export default class QuickActionForDeleteLwc extends NavigationMixin(LightningElement) {
@api recordId;
handleDelete() {
deleteRecord(this.recordId)
.then(() => {
this.dispatchEvent(
new ShowToastEvent({
title: 'Success',
message: 'Record deleted',
variant: 'success'
})
);
this.dispatchEvent(new CustomEvent('closemodal'));
})
.catch(error => {
this.dispatchEvent(
new ShowToastEvent({
title: 'Error deleting record',
message: error.body.message,
variant: 'error'
})
);
});
}
handleCancel() {
this.dispatchEvent(new CustomEvent('closemodal'));
}
}
quickActionForDeleteAura.cmp
<aura:component implements="force:lightningQuickActionWithoutHeader,force:hasRecordId,flexipage:availableForRecordHome,lightning:actionOverride">
<aura:attribute name="recordId" type="Id"/>
<c:quickActionForDeleteLwc recordId="{!v.recordId}" record-id="{!v.recordId}" onclosemodal="{!c.refreshAndCloseModal}"/>
</aura:component>
quickActionForDeleteAuraController.js
({
refreshAndCloseModal : function(component, event, helper) {
$A.get('e.force:refreshView').fire();
$A.get("e.force:closeQuickAction").fire();
}
})
通过上边测试,发现多了一个关闭图标,是因为Aura和Lwc各有一个关闭图标,现在需要隐藏一个。
quickActionForDeleteAura.cmp
<aura:component implements="force:lightningQuickActionWithoutHeader,force:hasRecordId,flexipage:availableForRecordHome,lightning:actionOverride">
<aura:html tag="style">
.slds-modal__close {
display: none;
}
.slds-modal__content {
height:unset !important;
max-height:unset !important;
}
</aura:html>
<aura:attribute name="recordId" type="Id"/>
<c:quickActionForDeleteLwc recordId="{!v.recordId}" record-id="{!v.recordId}" onclosemodal="{!c.refreshAndCloseModal}"/>
</aura:component>
quickActionForDeleteLwc.css
.inner .slds-modal__close {
display: inline !important;
}
下边两个QuickAction,一个是直接调用Lwc,另外一个是调用Aura,在Lightning画面两个都会正常显示,但是在Experiences
同样的详细画面中,只会显示调用Aura做成的QuickAction
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。