通过前两篇,我们看到跟标准画面不同,打开方式并不是Dialog方式,以下我们通过嵌套Aura情况下,打开Lwc画面。
1.Aura组件做成,Dialog里引用Lwc。
ListVIew数据下,如果需要选择的情报,也可以通过Aura传入Lwc组件中。
newContactInfoAuraComponent.cmp
代码语言:javascript复制<aura:component>
<aura:html tag="style">
/*control modal width*/
.slds-modal__container{
max-width: 180rem !important;
width:90% !important;
}
.modal-footer {
display: none;
}
</aura:html>
<aura:attribute name="selectedIds" type="List" default="" />
<section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-modal="true" aria-describedby="modal-content-id-1" class="slds-modal slds-fade-in-open">
<div class="slds-modal__container">
<div class="modal-body scrollable slds-modal__content slds-p-around--medium" style="height: 100%;">
<c:newContactInfo contactIds="{!v.selectedIds}"></c:newContactInfo>
</div>
</div>
</section>
<div class="slds-backdrop slds-backdrop_open"></div>
</aura:component>
2.Lwc组件
newContactInfo.js
代码语言:javascript复制import { LightningElement, api, track, wire } from 'lwc';
import { getRecord } from 'lightning/uiRecordApi';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
import { NavigationMixin } from 'lightning/navigation';
export default class NewContactInfo extends NavigationMixin(LightningElement) {
@api contactIds;
@track contactId;
activeSections = ['contactInfo'];
connectedCallback() {
console.log('>>>>>>>>>>>>>>>>' this.contactIds);
}
@wire(getRecord, { recordId: '$contactId', fields: ['Contact.Name'] })
wiredContact({ error, data }) {
if (data && data.fields) {
const evt = new ShowToastEvent({
title: 'Contact Operated Success',
message: 'Contact updated' data.fields.Name.value,
variant: 'success'
});
window.location.assign('/003');
} else if (error) {
// システムエラー画面に遷移する
}
}
handleSuccess(event) {
this.contactId = event.detail.id;
}
handleClose() {
window.location.assign('/003');
}
}
3.Application Aura组件
newContactInfoApp.app
代码语言:javascript复制<aura:application access="GLOBAL" extends="ltng:outApp">
<aura:dependency resource="c:newContactInfoAuraComponent"/>
</aura:application>
4.VfPage组件
这里从直接打开Lwc,改成Aura组件
newContactinfoVf.page
代码语言:javascript复制<apex:page standardController="Contact" recordSetVar="Contacts" showHeader="false">
<apex:includeLightning />
<div id="lightning" />
<script>
var selectedList = [];
</script>
<apex:repeat value="{!selected}" var="selectedItem">
<script>
selectedList.push('{!selectedItem}');
</script>
</apex:repeat>
<script>
$Lightning.use("c:newContactInfoApp", function () {
$Lightning.createComponent("c:newContactInfoAuraComponent",
{ selectedIds: selectedList },
'lightning',
function (cmp) {
}
);
});
</script>
</apex:page>
5.效果展示:
选择三条数据情况下,点击New按钮
通过Log,可以查看选择的数据情况。
登录成功