0

许多开发人员开始<teleport>在他们的组件中使用。例如 primeVue 中的下拉组件，使用传送来选择选项，并将它们发送到正文的末尾。

这虽然给 CSS 定位带来了很大的问题/问题，但我不能使用父类来定位这里是直接示例：

  <div class="red-container">
      <Dropdown v-model="dropSelect" :options="yesNo" optionLabel="name" optionValue="code" />
  </div>

有风格

.red-container .option-item{
 color : red
}

这个 css 将失败，原因很简单，选项 html 不在“.red-container”内，而是在正文的末尾，因为组件作者决定使用<teleport>它，所以似乎不可能根据父类来设置它的样式。

我在进行版本维护更新时在几个组件中遇到了这种行为，破坏了我所有的主题，问题是我不知道如何解决这个问题？

您如何使用父类定位传送的内容 CSS，甚至可能吗？

4

1 回答 1

0

这个问题的来源是 primeVue 从 3.0.2 到 3.7.+ 的迁移，其中组件“multiselect”“dropdown”开始使用破坏 css 的 Telepot 功能，如本问题描述中所述。

PrimeVue 通过设置组件“appendTo”确实建议了解决方案

<Dropdown appendTo="self"

设置“self”将在实际组件内移动传送，因此它将禁用传送，消除传送导致的问题。所以在编辑了 40 个组件之后，我可以继续前进:)。AppendTo 也接受选择器，因此传送的内容可以在任何地方自由移动。

结论：“如果您不知道自己在做什么，请不要使用 vue 3 传送 :)，如果您使用它，请确保您将添加组件选项以通过覆盖传送的“禁用”或“到”属性来控制其行为。

于 2021-09-18T14:49:42.990 回答