0

我在我的 nuxt 网页上添加了 v-flip。所以我的模板看起来像这样：

<div class="about__cards">
 <vue-flip class="about__single-card" active-click width = "350px" height="450px">
    <template v-slot:front>
        <p class="about__title">Stacks</p>
      </template>

      <template v-slot:back>
        <h4>My stacks</h4>
        <ul>
          <li>Javascript</li>
          <li>Css</li>
          <li>HTML</li>
          <li>Vue</li>
          <li>Nuxt</li>
        </ul>
      </template>
    </vue-flip>
...

这是我的造型：

.about__cards{
  display:flex;
  justify-content: space-evenly;
  /* background-color: transparent; */
}
.about__single-card{
  border:1px red solid;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 5px 18px rgba(0, 0, 0, 0.6);
  cursor: pointer;
  transition: 0.5s;
  position: relative;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

.front{
  background: red;
  width: 100%;
  height: 100%;
  /* line-height: 448px; */
  text-align: center;
  vertical-align: middle;
 /*  display: flex;
  flex-direction: column;
  align-content: flex-end; */
}

我放在前面是因为在检查我看到的那个类的元素时。一切似乎都奏效了。然后我意识到我没有确定样式的范围，所以会弄乱其他页面。我做到了，重新启动服务器，现在它不再适用于 v-slot 的样式。但是如果我去检查元素并且我去"front"预先给定的类，我可以在那里改变它......我读到你可以设置 v-slots 的样式，但在我这样做之前，我有点困惑。我在这里缺少什么？谢谢

4

1 回答 1

1

这是因为作用域样式是通过使用组件唯一 ID 作为选择器的一部分来“限定”的。

如果您检查您的应用程序，您会看到类似这样的内容（1d328d7a是uid）

<div
  data-v-1d328d7a=""
  class="field-input-wrapper"
...

.field-input-wrapper[data-v-1d328d7a] {
  ...

为了绕过这个，你可以像这样使用深度选择器

.about__single-card >>> .front{
  background: red;
  width: 100%;
  height: 100%;
  text-align: center;
  vertical-align: middle;
}
于 2020-06-05T10:57:03.833 回答