本篇参考:https://www.lightningdesignsystem.com/components/modals/

随着salesforce lwc的优化,越来越多的项目从aura转到了lwc开发,没有lwc的知识是不能的,但是指望lwc可以搞定所有的场景是万万不能的,比如今天的场景,quick action。目前 quick action只允许选择 Aura Component,所以我们开发 quick action基本操作是 aura 套着 lwc实现功能。那如何更好的适配UI,本篇浅入浅出,做一些特定场景的demo,以便有需求的小伙伴可以快速参考上手。先来一个简单的demo。

quickActionLwcAdjustment.html

<template>
this is a component build by LWC
</template>

testQuickActionForLWC.cmp

<aura:component implements="force:lightningQuickActionWithoutHeader,force:hasRecordId,flexipage:availableForRecordHome,lightning:actionOverride">
<aura:attribute name="recordId" type="Id"/>
<c:quickActionLwcAdjustment/>
</aura:component>

将这个aura component配在 quick action中,我们demo中放在了account里面

展示效果:

嗯,实现了,目测没啥问题。但是总觉怪怪的,因为弹出的 Modal没有header,没有footer,但是大部分弹出的需要这些内容,所以,OK,我们继续往下探索,加一下header 以及 footer,demo中 header / footer放在lwc中。

1.0版改动尝试

quickActionLwcAdjustment.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">
<h2 class="title slds-text-heading--medium slds-hyphenate">header title section</h2>
</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">this is a component build by LWC</p>
</lightning-card>
</div> <div class="slds-modal__footer">
<lightning-button onclick={handleOKClick} variant="brand" label="OK" class="slds-m-right_x-small slds-no-flex text-right slds-float--right"></lightning-button>
</div>
</div>
</div>
</template>

quickActionLwcAdjustment.js

import { LightningElement } from 'lwc';

export default class QuickActionLwcAdjustment extends LightningElement {
handleOKClick(event) {
this.dispatchEvent(new CustomEvent('closemodal'));
}
}

testQuickActionFowLWC.cmp

<aura:component implements="force:lightningQuickActionWithoutHeader,force:hasRecordId,flexipage:availableForRecordHome,lightning:actionOverride">
<aura:attribute name="recordId" type="Id"/>
<c:quickActionLwcAdjustment onclosemodal="{!c.refreshAndCloseModal}"/>
</aura:component>

testQuickActionForLWCController.js

({
refreshAndCloseModal : function(component, event, helper) {
$A.get('e.force:refreshView').fire();
$A.get("e.force:closeQuickAction").fire();
}
})

效果展示:

尽管还有点丑,但是雏形出来了,做一下适配。

2.0版改动尝试

testQuickActionForLWC上面加一下的样式

<aura:html tag="style">
.slds-modal__content {
height:unset !important;
max-height:unset !important;
}
</aura:html>

尽管整体效果挺好,但是关闭的按钮却没有顶上去,所以没法作为最终版本,我们通过样式把关闭按钮隐藏,使用lwc展示

3.0版改动尝试

testQuickActionForLWC.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:quickActionLwcAdjustment onclosemodal="{!c.refreshAndCloseModal}"/>
</aura:component>

quickActionLwcAdjustment.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">header title section</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={handleOKClick}>
</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">this is a component build by LWC</p>
</lightning-card>
</div> <div class="slds-modal__footer">
<lightning-button onclick={handleOKClick} variant="brand" label="OK" class="slds-m-right_x-small slds-no-flex text-right slds-float--right"></lightning-button>
</div>
</div>
</div>
</template>

quickActionLwcAdjustment.css:做一个派生选择器,先隐藏整体,然后指定css下子样式展示

.inner .slds-modal__close {
display: inline !important;
}

显示效果如下:

总结: 这个demo现在还有瑕疵,quick action展示的关闭按钮是白色,这个是透明色。本篇抛砖引玉,大神们类似需求如何实现,欢迎留言和讨论。篇中有错误欢迎指出,有不懂欢迎留言。

Salesforce LWC学习(三十一) Quick Action适配的更多相关文章

  1. Salesforce LWC学习(三十九) lwc下quick action的recordId的问题和解决方案

    本篇参考: https://developer.salesforce.com/docs/component-library/bundle/force:hasRecordId/documentation ...

  2. Salesforce LWC学习(三十) lwc superbadge项目实现

    本篇参考:https://trailhead.salesforce.com/content/learn/superbadges/superbadge_lwc_specialist 我们做lwc的学习时 ...

  3. Salesforce LWC学习(三十六) Quick Action 支持选择 LWC了

    本篇参考: https://developer.salesforce.com/docs/component-library/documentation/en/lwc/lwc.use_quick_act ...

  4. Salesforce LWC学习(三) import & export / api & track

    我们使用vs code创建lwc 时,文件会默认生成包含 template作为头的html文件,包含了 import LightningElement的 js文件以及对应的.js-meta.xml文件 ...

  5. Salesforce LWC学习(二十一) Error浅谈

    本篇参考:https://developer.salesforce.com/docs/component-library/documentation/en/lwc/data_error https:/ ...

  6. Salesforce LWC学习(三十五) 使用 REST API实现不写Apex的批量创建/更新数据

    本篇参考: https://developer.salesforce.com/docs/atlas.en-us.224.0.api_rest.meta/api_rest/resources_compo ...

  7. Salesforce LWC学习(三十二)实现上传 Excel解析其内容

    本篇参考:salesforce lightning零基础学习(十七) 实现上传 Excel解析其内容 上一篇我们写了aura方式上传excel解析其内容.lwc作为salesforce的新宠儿,逐渐的 ...

  8. Salesforce LWC学习(三十七) Promise解决progress-indicator的小问题

    本篇参考:https://developer.salesforce.com/docs/component-library/bundle/lightning-progress-indicator/exa ...

  9. Salesforce LWC学习(三十四) 如何更改标准组件的相关属性信息

    本篇参考: https://www.cnblogs.com/zero-zyq/p/14548676.html https://www.lightningdesignsystem.com/platfor ...

随机推荐

  1. Codeforces Round #627 (Div. 3) F - Maximum White Subtree(深度优先搜索)

    题意: n 个点 n - 1 条边的树,问每个点所在所有子树中白黑点数目的最大差. 思路: 白点先由下至上汇集,后由上至下分并. #include <bits/stdc++.h> usin ...

  2. Codeforces Round #646 (Div. 2) A. Odd Selection(数学)

    题目链接:https://codeforces.com/contest/1363/problem/A 题意 判断是否能从 $n$ 个数中选 $x$ 个数加起来和为奇数. 题解 首先 $n$ 个数中至少 ...

  3. 吉哥系列故事――恨7不成妻 HDU - 4507

    题目: 单身! 依然单身! 吉哥依然单身! DS级码农吉哥依然单身! 所以,他生平最恨情人节,不管是214还是77,他都讨厌! 吉哥观察了214和77这两个数,发现: 2+1+4=7 7+7=7*2 ...

  4. 对模拟器虚假设备识别能力提升15%!每日清理大师App集成系统完整性检测

    前言 每日清理大师是一款智能便捷的手机清理软件,可快速清理无用缓存.垃圾文件和应用残留,还可深度清理如社交软件中的无用缓存等,有效解决手机卡顿.耗电快.内存不足等问题.每日清理大师App在结合了系统完 ...

  5. LINUX - 最简单的CS通信实例

    服务端[编译:gcc server.c -o server] #include <stdio.h> #include <sys/socket.h> #include <s ...

  6. Linux系统启动过程内核文件丢失解决方法

    一.问题描述 公司近期因机房断电,导致服务器重启后,引导进入不了操作系统.经过检查发现启动文件缺失,导致系统启动失败,网上搜了好多资料,解决都比较零散,现结合实际处理经验和网友的建议整理接方案. 二. ...

  7. leetcode 1 两数之和 hashmap

    主要是hashmap.还有边插入边查找,提高效率和降低空间复杂度. 之前一直用map,结果发现还有hashmap,效率更高. 注意名称空间为 using namespace __gnu_cxx; 问题 ...

  8. Leetcode(884)-索引处的解码字符串

    给定一个编码字符串 S.为了找出解码字符串并将其写入磁带,从编码字符串中每次读取一个字符,并采取以下步骤: 如果所读的字符是字母,则将该字母写在磁带上. 如果所读的字符是数字(例如 d),则整个当前磁 ...

  9. Ubuntu下跑通py-faster-rcnn、详解demo运作流程

    在不同的服务器不同的机器上做过很多次实验,分别遇到各种不一样的错误并且跑通Py-Faster-RCNN,因此,在这里做一个流程的汇总: 一.下载文件: 首先,文件的下载可以有两种途径: 1.需要在官网 ...

  10. 【rocketmq学习笔记】rocketmq入门学习

    基本介绍 rocketmq是阿里巴巴团队使用java语言开发的一款基于发布订阅模型的分布式消息队列中间件,是一款低延迟,高可用,拥有海量消息堆积能力和灵活拓展性的消息队列. 特点 可以实现集群无单点故 ...