[Salesforce组件开发][LWC] 弹出框开发

前言：

LWC（Lightning Web Component）是使用HTML和现代JavaScript构建的自定义HTML元素。基于在浏览器中本地运行的代码构建的，因此它是轻量级的，并具有出色的性能。在Salesforce的Lightning系统中，它十分常见，并且为SF官方推荐的下一代开发框架。Salesforce致力于开发开放的Web标准，并且是World Wide Web联盟（W3C）的成员。

弹出框概念 （Modals）

在页面App中，弹出框可以说是十分常见的Case，很多操作都会用到它，因为弹出框相对而言比较复杂，所以它并不在lwc提供的自定义标签中。因此，我们在进行lwc的弹出框开发的过程中，需要参照LDS（Lightning Design System）。
最基本的标准Lightning样式弹出框长这个样子：

整个弹出框组件分为两大部分，弹出框部分又分三个小部分

• 弹出框（modal）
  • 头部（head）
  • 主体（body）
  • 尾部（footer）
• 背景 （back-drop）

弹出框需要将用户的注意力全部暂时集中到屏幕*，因此，弹出框弹出之后，背景将变得不可用，弹出框需要置于屏幕正*，占据一个合理的大小位置。
以上的分析是如果我们从无到有开发一个弹出框需要考虑的，但是LDS已经帮我们做好标准化样式和各种标签的开发了，我们只需要把LDS中Modal的代码基础上进行自定义开发即可。

自定义开发

在我们的Project中新建一个LWC组件。

弹出框需要通过按钮、区域、图标等的点击事件唤起，所以我们需要在html文件中写一个呼起弹出框的元素，这边我们简单写一个按钮，然后把modal的标准代码也拷贝进我们的html代码里。

<template>
    <lightning-button label="Modal" onclick={showModal}></lightning-button>
    <template if:true={show}>
    <!-- Modal 标准代码部分 -->
        <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">
            <header class="slds-modal__header">
            <button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse" title="Close">
            <svg class="slds-button__icon slds-button__icon_large" aria-hidden="true">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#close"></use>
            </svg>
            <span class="slds-assistive-text">Close</span>
            </button>
            <h2 id="modal-heading-01" class="slds-modal__title slds-hyphenate">Modal header</h2>
            <p class="slds-m-top_x-small">Here’s a tagline if you need it. It is allowed to extend across mulitple lines, so I’m making up content to show that to you. It is allowed to
            <a href="javascript:void(0);">contain links or be a link</a>.</p>
            </header>
            <div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
            <p>Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. Mollit officia cillum Lorem ullamco minim nostrud elit officia tempor esse quis. Cillum sunt ad dolore quis
            aute consequat ipsum magna exercitation reprehenderit magna. Tempor cupidatat consequat elit dolor adipisicing.</p>
            <p>Dolor eiusmod sunt ex incididunt cillum quis nostrud velit duis sit officia. Lorem aliqua enim laboris do dolor eiusmod officia. Mollit incididunt nisi consectetur esse laborum eiusmod pariatur proident. Eiusmod et adipisicing culpa deserunt nostrud
            ad veniam nulla aute est. Labore esse esse cupidatat amet velit id elit consequat minim ullamco mollit enim excepteur ea.</p>
            </div>
            <footer class="slds-modal__footer">
            <button class="slds-button slds-button_neutral">Cancel</button>
            <button class="slds-button slds-button_brand">Save</button>
            </footer>
            </div>
            </section>
        <div class="slds-backdrop slds-backdrop_open"></div>
    </template>
</template>

在Js代码中，我们用按钮的onclick事件控制Modal显示的Boolean变量show：

import { LightningElement,track } from 'lwc';

export default class ModalSample extends LightningElement {
    @track
    show = false
    showModal() {
        this.show = true
    }
}

其中，@track声明变量show可响应，在变更show的值的时候，画面会响应式地渲染。（注意，track主要针对array以及object类型的响应式变量，如果只是单纯的变量，可以不加@track）

写好Html和Js之后，我们不做任何修改，看一下modal是否成功：

点击按钮之后，modal弹出：

目前这个弹出框完全和标准库中提供的一致，按钮等都没有逻辑，我们可以在js代码中完整我们的按钮逻辑等。
弹出框一般用于用户的确认、信息提示，抑或是数据操作等，Cancel的逻辑毋庸置疑是要将弹出框关闭，Save逻辑是对记录数据操作之后，保存到数据库中。
接下来我们就来实现一个，Opportunitity的新建操作。
在简单地改造之后，我们的Modal变成了这样：

这里我们用到了另一个标准标签lightning-edit-form，在新建一个Opportunity之后，我们会自动跳转到新建的页面上去。

可以看到我们通过弹出框新建了一条Opportunity。
现在我们的组件代码长这样：

<template>
    <lightning-button label="Modal" onclick={showModal}></lightning-button>
    <template if:true={show}>
        <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">
            <header class="slds-modal__header">
            <button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse" title="Close" onclick={cancel}>
            <svg class="slds-button__icon slds-button__icon_large" aria-hidden="true">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#close"></use>
            </svg>
            <span class="slds-assistive-text">Close</span>
            </button>
            <h2 id="modal-heading-01" class="slds-modal__title slds-hyphenate">New opportunity</h2>
            <p class="slds-m-top_x-small">please enter the opportunity's info</p> 
            </header>
            <lightning-record-edit-form object-api-name="Opportunity" onsuccess={Navigate}>
            <div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
                <lightning-messages>
                </lightning-messages>
                    <lightning-input-field field-name="Name"></lightning-input-field>
                    <lightning-input-field field-name="Description"></lightning-input-field>
                    <lightning-input-field field-name="StageName"></lightning-input-field>
                    <lightning-input-field field-name="AccountId"></lightning-input-field>
                    <lightning-input-field field-name="Amount"></lightning-input-field>
                    <lightning-input-field field-name="CloseDate"></lightning-input-field>
                </div>
                <footer class="slds-modal__footer">
                    <button class="slds-button slds-button_neutral" onclick={cancel}>Cancel</button>
                    <lightning-button
                        class="slds-m-top_small"
                        variant="brand"
                        type="submit"
                        name="Save"
                        label="Save">
                    </lightning-button>
                </footer>
            </lightning-record-edit-form>
            </div>
            </section>
        <div class="slds-backdrop slds-backdrop_open"></div>
    </template>
</template>

import { LightningElement,track } from 'lwc';
import { NavigationMixin } from 'lightning/navigation';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';

export default class ModalSample extends NavigationMixin(LightningElement) {
    @track
    show = false
    showModal() {
        this.show = true
    }
    Navigate(event) {
        let recordId = event.detail.id
        this.openOrder = false
        this[NavigationMixin.Navigate]({
            type: 'standard__recordPage',
            attributes: {
                recordId: recordId,
                objectApiName: 'Opportunity',
                actionName: 'view',
            },
        });
        this.showSuccessNotification('Saved','New opportunity saved','success')
    }

    // toast util method
    showSuccessNotification(_title, _message, _variant) {
        const evt = new ShowToastEvent({
            title: _title,
            message: _message,
            variant: _variant,
        });
        this.dispatchEvent(evt);
    }

    cancel() {
        this.show = false
    }

}

以上就是简单的弹出框开发了。快去试试吧。

本文地址：https://blog.csdn.net/qq_35714301/article/details/111085197