小编Sha*_*kov的帖子

带有嵌套元素的 CSS 粘性位置

据我所知,在离开框架之前,粘性位置会粘在它的容器上。

我的问题是我有一些嵌套的容器和其中的粘性元素,并希望它坚持它的祖父母。

有人可能会建议我会冒泡我内心的粘性孩子,但问题是它必须留在它的父级内部,因为父级是一个包含两个元素的 flexbox,我希望其中一个元素具有粘性,同时允许另一个元素在溢出时滚动。

一个示例 html:

<div class="main-container">
  <div class="inner-container">
    <div class="sticky">sticky child</div>
    <div class="non-sticky">non-sticky child</div>
  </div>
</div>
Run Code Online (Sandbox Code Playgroud)

和样式:

.inner-container {
  display: flex;
  flex-direction: row;
}

.sticky {
  position: sticky;
  top: 0;
}
Run Code Online (Sandbox Code Playgroud)

假设它main-container是可滚动的并且inner-container正在滚动。

我知道css没有支持明确的解决方案,问题是是否有任何技巧可以处理它。

html css position parent sticky

7
推荐指数
1
解决办法
3590
查看次数

通过打字稿向 Angular 2 组件传递 @input

我有一个组件基本上看起来像

export class MyComponent{
  @Input() inp: string;
}
Run Code Online (Sandbox Code Playgroud)

我有另一个使用材质对话框的组件,如下所示:

export class MyParentComponent{
  openDialog(): void {
     let dialogRef = this.dialog.open(MyComponent);
}
Run Code Online (Sandbox Code Playgroud)

我想知道如何将 @input 参数传递给 MyComponent。我能想到的唯一解决方案是用另一个组件包装 MyComponent,该组件通过 html 向其发送输入参数,并使用这个新组件作为“open”的参数。有没有其他好的解决方案,我不必创建另一个组件?

input typescript angular-material angular

5
推荐指数
0
解决办法
1229
查看次数

当 ESLint 规则“prefer-destructuring”没有意义时该怎么办

在很多情况下,ESLint 的规则"prefer-destructuring"是相当奇怪的。考虑以下示例:

obj.someVar = myList[0];
Run Code Online (Sandbox Code Playgroud)

在这两种情况下,linter 都会警告我。

linter 想要的预期行为是什么?我可以使用临时变量来保存列表项的值,然后执行其余的逻辑,但我没有看到它有任何好处。有什么想法吗?

编辑:

我可以看到该规则在某些情况下的好处,即:

// bad
const someVar = myList[0];

// good
const [ someVar ] = myList;
Run Code Online (Sandbox Code Playgroud)

但是,当分配不直接给 var 时(例如分配对象的属性时),该规则似乎无关紧要。

javascript eslint

1
推荐指数
1
解决办法
690
查看次数

Vue js - 使子组件继承样式

首先,当我想为当前组件创建一个私有样式时,我将它定义在一个标签中。为了让子组件的样式可见,我使用了一个深度选择器让它通过,如下所示:

<style scoped>
   .a >>> .b {
       ...
   }
</style>
Run Code Online (Sandbox Code Playgroud)

上面的代码被翻译成

.a[data-v-f3f3eg9] .b
Run Code Online (Sandbox Code Playgroud)

换句话说:对于这个特定 a 的每个孩子,如果它是 b,则对其应用以下样式。

我的问题是关于以下声明:

<style scoped>
   >>> .b {
      ...
   }
</style>
Run Code Online (Sandbox Code Playgroud)

首先,Visual Code 抛出一个关于这个表达式的错误:

[css] 预期规则或选择器

希望我在深度选择器之前放置一个作用域选择器。我想弄清楚的是,这个表达式是否按照文档中的说明进行了预处理,这应该是

.b
Run Code Online (Sandbox Code Playgroud)

那么是什么使这种风格不是全局的,并且不同于下面的定义(没有作用域):

<style>
   .b {
       ...
   }
</style>
Run Code Online (Sandbox Code Playgroud)

事实上,它们是不同的。我已经试过了,后者实际上是全局的,而前者对于父组件和它的子组件都是可见的。

有没有人对此有解释?并且,如果语法

<style scoped>
   >>> .b {
      ...
   }
</style>
Run Code Online (Sandbox Code Playgroud)

不是很常见,制作仅用于子组件的样式而不为父元素定义选择器的正确方法是什么?

css vue.js vuejs2

0
推荐指数
1
解决办法
2007
查看次数