我正在处理一个 udemy.com 视频，并且发布了这个问题而没有任何回应，所以我在这里发布，看看我是否可以深入了解我的问题。我正在使用 Lit-element 2.0rc 并致力于构建个人电话簿应用程序。
该项目的范围是我有一个可以在单击添加联系人链接时作为弹出窗口调用的表单。我已经设置了弹出窗口的属性，并且按钮单击正在工作。目前不起作用的是弹出窗口本身，因为我的页面上仍然可以看到表单，我不确定如何让它消失，以便可以通过弹出属性调用表单。我想让某人查看我的代码，并让我知道是否需要更改任何内容，以便表单保持隐藏状态，直到单击按钮将其作为弹出窗口显示这里是我正在使用的代码
App.js
import {LitElement, html} from 'lit-element';
import SideMenu from './SideMenu.js';
import ContentArea from './ContentArea.js';
class PhoneBook extends LitElement{
constructor(){
super();
this.popupOpen = false;
}
togglePopup(){
console.log('clicked button');
console.log(this.popupOpen);
this.popupOpen = !this.popupOpen;
console.log(this.popupOpen);
this.requestUpdate();
}
render(){
return html `
<style>
.main-page{
display: grid;
grid-template-columns: 250px 1fr;
}
</style>
<div class="main-page">
<side-menu .togglePopup="${this.togglePopup}"></side-menu>
<content-area popupOpen="${this.popupOpen}" .togglePopup="${this.togglePopup}">
</content-area>
</div>
`;
}
}
customElements.define('phone-book', PhoneBook)
Sidemenu.js
import {LitElement, html} from 'lit-element'
export default class SideMenu extends LitElement{
constructor(){
super();
}
static get properties(){
return{
togglePopup: Function
}
}
render(){
return html `
<style>
@import './css/global.css';
#side-menu{
background: #323759;
height: 100vh;
padding: 50px 25px
}
.logo{
text-align:center;
}
.logo img{
width: 100px;
}
.title{
font-weight: 700;
color: #ccced7;
margin: 1rem 0;
}
#side-menu nav a {
color: #ccced7;
text-decoration: none;
text-transform: capitalize;
display: block;
padding: 10px 10px 10px 0;
}
#side-menu nav a span.icon{
padding: 10px 10px 10px 0;
}
</style>
<section id="side-menu">
<div class="logo"><img src="../images/logo.png"></div>
<div class="menu">
<div class="title">Contacts</div>
<nav>
<a href="#" @click="${this.togglePopup}"><span class="icon">+</span>Add
Contact</a>
<a href="#"><span class="icon">+</span>Add Contact</a>
<a href="#"><span class="icon">+</span>Add Contact</a>
<a href="#"><span class="icon">+</span>Add Contact</a>
</nav>
</div>
</section>
`;
}
}
customElements.define('side-menu', SideMenu)
contentArea.js
import {LitElement, html} from 'lit-element';
import ContactsList from '../components/ContactsList.js';
import FavoritesList from '../components/FavoritesList';
import FormPopup from '../components/FormPopup';
export default class ContentArea extends LitElement{
constructor(){
super();
}
static get properties(){
return{
popupOpen: Boolean,
togglePopup: Function
}
}
render(){
return html `
<style>
@import './css/global.css';
#content-area{
background: #fcfdff;
padding: 50px 80px;
}
</style>
<section id="content-area">
<form-popup .popupOpen="${this.popupOpen}" .togglePopup="${this.togglePopup}">
</form-popup>
<favorites-list></favorites-list>
<contacts-list></contacts-list>
</section>
`;
}
}
customElements.define('content-area', ContentArea)
Formpopup.js
import {LitElement, html} from 'lit-element'
import ContactsList from '../components/ContactsList.js'
import FavoritesList from '../components/FavoritesList'
export default class FormPopup extends LitElement{
constructor(){
super();
}
static get properties(){
return{
popupOpen: Boolean
}
}
render(){
return html `
<style>
@import './css/global.css';
.form-popup{
background: #2b304c;
height: 100vh;
width: 100vw;
position: fixed;
top: 0;
left: 0;
display: flex;
justify-content: center;
align-items: center;
visibility: hidden;
transition: all .4s ease-in-out;
opacity: 0
}
.form-popup.active{
visibility: visible;
opacity: 1;
}
form{
width: 400px;
background: white;
padding: 20px;
border-radius: 10px;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-gap: 20px;
}
h2{
font-size: 1.4rem;
font-weight: 500;
grid-column: 1/5;
}
.form-group{
padding: 0;
}
label{
font-size: .7rem;
background: white;
position: relative;
top: 7px;
display: inline-block;
}
input[type="text"]{
padding: 10px;
display: block;
width: 100%;
}
.first-name{
grid-column: 1/3;
}
.last-name{
grid-column: 3/5;
}
.address-1{
grid-column: 1/5;
}
.address-2{
grid-column: 1/5;
}
.city{
grid-column: 1/3
}
.button{
justify-self: end;
grid-column: 4/5;
}
.button button{
cursor: pointer;
padding: 10px 25px;
background: #1e5799; /* Old browsers */
background: #00b7ea; /* Old browsers */
background: -moz-linear-gradient(top, #00b7ea 0%, #009ec3 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* Chrome10-
25,Safari5.1-6 */
background: linear-gradient(to bottom, #00b7ea 0%,#009ec3 100%); /* W3C, IE10+,
FF16+, Chrome26+, Opera12+, Safari7+ */
border: 1px solid rgba(0, 0, 0, .1);
color: white;
border-radius: 5px;
text-shadow: 0px 1px 2px rgba(0, 0, 0, 1)
}
.close-btn{
position: absolute;
z-index: 3;
right: 30px;
top: 0;
font-size: 2rem;
padding: 20px;
color:white;
}
.close-btn svg{
width: 24px;
height: 24px;
}
</style>
<section className="form-popup${(this.popupOpen) ? ' active' : ''}">
<form>
<div class="close-btn" @click="${this.togglePopup}"><svg
xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" data-
prefix="fas"
data-icon="times" class="svg-inline--fa fa-times fa-w-11" role="img"
viewBox="0 0 352 512"><path fill="currentColor"
d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-
22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28
75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-
12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28
12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176
322.72l100.07
100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19
0-44.48L242.72 256z"/></svg></div>
<h2>Add a new contact</h2>
<div class="form-group first-name">
<label for="first_name">First Name</label>
<input type="text" name="first_name">
</div>
<div class="form-group last-name">
<label for="first_name">Last Name</label>
<input type="text" name="last_name">
</div>
<div class="form-group address-1">
<label for="first_name">Address #1</label>
<input type="text" name="address_1">
</div>
<div class="form-group address-2">
<label for="first_name">Address #2</label>
<input type="text" name="address_2">
</div>
<div class="form-group city">
<label for="first_name">City</label>
<input type="text" name="city">
</div>
<div class="form-group state">
<label for="first_name">State</label>
<input type="text" name="state">
</div>
<div class="form-group zipcode">
<label for="first_name">zipcode</label>
<input type="text" name="zipcode">
</div>
<div class="form-group button">
<button type="submit">Add</button>
</div>
</form>
</section>
`;
}
}
customElements.define('form-popup', FormPopup)
再次假设发生的是，可以通过单击添加新联系人链接来调用隐藏的表单，但这并没有发生，因为它本身的表单仍然显示在页面上，并且没有像应有的那样被隐藏。
感谢您提供的任何帮助。