是否可以使用 VueJS 和 vanilla JS 来折叠许多 div 之一？
我在具有标题和正文的单独卡片中有数据 - 我希望在单击标题时卡片的正文折叠/展开。
正在使用 VueJS，我想暂时不使用 JQuery，专注于 vanilla JS。
有关它的外观示例，请参阅此小提琴。请记住，我完全知道不要对多个元素使用相同的 ID - 这是一个用于说明目的的快速演示。
<div class="section">
<div class="title" @click="toggle"><span class="toggleIcon" id="toggleIcon">{{toggleIcon}}</span>Toggle This Section</div>
<hr/>
<div class="body" id="toggle">
<img style="height:100px" src="https://cdn.vox-cdn.com/thumbor/Pkmq1nm3skO0-j693JTMd7RL0Zk=/0x0:2012x1341/1200x800/filters:focal(0x0:2012x1341)/cdn.vox-cdn.com/uploads/chorus_image/image/47070706/google2.0.0.jpg">
</div>
</div>
我目前的问题是我可以折叠一个 div，但不能折叠单个 div。
有没有一种方法可以content通过Cypress在元素上测试：CSS的伪CSS类？
我看过链接记录：
但是我没有使用::before伪类为CSS类找到任何东西。
想象一下代码：
.myClass:before {
content: "foo-";
}<div>
<span class="myClass">Bar</span>
</div>如何测试“ foo-”的存在？
是否可以将CSS类应用于<body>HTML文档的标记？
到目前为止,我一直在尝试这样的事情:
document.getElementsByClassName("body").add("cssClass");
希望在整个DOM上应用过滤器,以便在特定时间使页面变暗,但保留DOM本身的所有功能.
我遵循了官方的 Electron 教程以及其他一些在线教程，并在我的目录中创建了关联的文件。但是，教程中显示的文件是JavaScript而不是TypeScript，因为我在 Angular 中使用了它。
有什么方法可以将我创建的文件从使用转换require为实际使用import它们吗？
我过去曾看到过做类似的事情import * as component from './...'，但我不确定从同一来源导入多个组件，例如：
const {app, BrowserWindow} = require('electron');
ElectronStart.ts（main.js教程中调用了这个，但是Angular-CLI已经有这个名字的文件了）
const {app, BrowserWindow} = require('electron');
const path = require('path');
设置事件.ts
const electron = require('electron');
const ChildProcess = require('child_process');
module.exports = {
...
}
创建安装程序.ts
const createWindowsInstaller = require('electron-winstaller').createWindowsInstaller;
是否有可能加载的地方的一个组成部分loading...之间<app-root>的角项目的index.html内？
加载Angular应用程序时,如果页面加载时连接速度较慢等,则<app-root></app-root>index.html文件中的标记之间显示的内容将显示在屏幕上.
我想要在这一点上放置一个微调器,使它看起来像是在背景中发生的事情而不是一个空白的白色屏幕.
这是微调器的代码:
.lds-ring {
display: inline-block;
position: relative;
width: 64px;
height: 64px;
}
.lds-ring div {
box-sizing: border-box;
display: block;
position: absolute;
width: 51px;
height: 51px;
margin: 6px;
border: 6px solid var(--pa-red);
border-radius: 50%;
animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
border-color: var(--pa-red) transparent transparent transparent;
}
.lds-ring div:nth-child(1) {
animation-delay: -0.45s;
}
.lds-ring div:nth-child(2) {
animation-delay: -0.3s;
}
.lds-ring div:nth-child(3) {
animation-delay: -0.15s;
}
@keyframes lds-ring {
0% {
transform: …我有一个函数调用另一个本身使用 http 订阅的函数，但我在测试它时遇到了麻烦...
我的组件
id = 1;
myFunct() {
this.myService.delete(this.id);
}
我的服务
delete(id) {
this.http.delete(this.myUrl + '/' + id).subscribe()
}
测试
let mockService;
beforeEach(() => {
TestBed.configureTestingModule({
mockService = createSpyObj(['delete']);
imports: ...,
declarations: ...,
providers: [
{provide: MyService, useValue: mockService}
]
}).compileComponents();
fixture = ...;
component = ...;
fixture.detectChanges();
});
it('should test delete', () => {
mockService.delete.and.returnValue({ subscribe: () => {} });
component.myFunct();
expect(mockService.delete).toHaveBeenCalledTimes(1);
});
我的测试返回了错误：
无法读取未定义的属性“订阅”
gulp-sass在 node-sass 被弃用后，我已将 Gulp 文件更改为使用 Dart SASS 。
然而，看来我正在努力让它真正发挥作用。
我已经设置了 gulp 文件函数来使用它，就像NPM页面描述的那样。唯一的区别是我是在 a 中使用它，series而不是像演示的那样直接使用它。
function scss () {
return src(`${__dirname}/.../*.scss`)
.pipe(sass({outputStyle : 'expanded', cache : '/tmp/sass-cache'}).on('error', sass.logError))
.pipe(postcss([ autoprefixer() ]))
.pipe(dest('System/cache'));
}
我的系列电话是：
exports.default = series(deleteDirs, createDirs, scss, build, compile, preview);
当我跑步时gulp我得到：
Starting 'scss'...
'scss' errored after 8.19 ms
TypeError: sass is not a function
at scss (/.../gulpfile.js:98:15)
节点版本：10.13.0 npm 版本：6.4.1 nvm 版本：0.35.3 （我nvm use 10之前做过）
我确实使用了旧版本的 npm，因为我之前看到一篇文章指出新版本可能会出现这些问题。
当我尝试测试时，我遇到了错误...
我已经阅读了许多类似的相关问题，但是将我的自定义 LoginComponent 添加到 app.module.ts 提供程序没有帮助？它已经在进口部分。
应用程序模块.ts
@NgModule({
declarations: [
AppComponent,
LoginComponent,
],
imports: [
BrowserModule,
FormsModule,
HttpClientModule
],
providers: [
{
provide: HTTP_INTERCEPTORS,
useClass: AppHttpInterceptor,
multi: true
}
],
bootstrap: [AppComponent]
})
export class AppModule { }
login.component.spec.ts（摘要）
import {async, ComponentFixture, inject, TestBed} from '@angular/core/testing';
import {LoginComponent} from './login.component';
import {FormsModule, NgForm} from '@angular/forms';
import {HttpClientModule} from "@angular/common/http";
import {AuthService} from "../../services/auth/auth.service";
describe('LoginComponent', () => {
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [LoginComponent],
imports: [FormsModule, HttpClientModule, FormsModule]
}).compileComponents();
fixture …有没有办法让我的垫子扩展面板只有在我点击某个按钮时才能打开？
我正在考虑有一个信息列表，我可以在上面单击编辑图标，这会导致展开显示编辑选项......
当然，我不希望面板在行上随机单击时扩展，而只在编辑图标上...
我有一个表单,我想使用ENTER键在字段中选项卡,但我也想在我突出显示(通过Tab键/输入)发送按钮时使用ENTER键提交表单.
有什么方法可以判断输入按钮是否已被聚焦？
我想的是:
<form (keydown.enter)="isSendFocussed($event)">
<input #input1> <!-- input 1 -->
<input #input2> <!-- input 2 -->
<input #input3> <!-- input 3 -->
<button #myButton (click)="sendForm()">Send</button>
</form>
然后我会为这个isSendFocussed(event)功能做一些事情,比如:
@ViewChild('myButton') btn: ElementRef<HTMLInputElement>
isSendFocussed(event) {
// if (!button is focussed) {
// block default functionality and tab across
// } else {
// send form
// }
}