Question

我是Vue的新手，正在学习CSS3的复杂性

我正在构建一个组件，可以在这里找到：https://codesandbox.io/s/yjp674ppxj

简而言之，我有一个具有相对位置的convert(datetime, substring(myDatetimeString, charindex(' ', myDatetimeString), 1000))元素，然后有一个具有绝对位置的ul元素的列表，并且我动态地计算了div属性。

理想情况下，我希望文本出现在整个列表之后。但是，通过执行此操作，top元素现在的高度为ul。如何保持身高并保持相同的效果？

下面是纯html5和css3 MWE：

0px

ul {
  position: relative;
  border: solid 1px coral;
}

li {
  position: absolute;
  top: calc(10px * var(--index));
  border: solid 0.5px black;
}

Answer 1

您可以考虑使用边距最高的广告来代替position:absolute

ul {
  position: relative;
  border: solid 1px coral;
  padding-top:8px;
}

li {
  margin-top: -8px;
  border: solid 0.5px black;
  transition:0.5s all;
}
li:hover {
  margin-top:-12px;
  margin-bottom:4px;
}

<ul>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>

</ul>

<p>test that shoudl be after list</p>

更新

您还可以考虑在悬停时进行转换：

ul {
  position: relative;
  border: solid 1px coral;
  padding-top:8px;
}

li {
  margin-top: -8px;
  border: solid 0.5px black;
  transition:0.5s all;
}
li:hover {
  transform:translateY(-5px);
}

<ul>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>

</ul>

<p>test that shoudl be after list</p>

Answer 2

如果您想保留json = serializers.serialize('json', object_list, fields=('field1', 'field2'))，可以执行以下操作：

更新您的 ListPerspective.vue ：

position: absolute

通过在末尾添加一个带槽的列表元素。还要添加一种计算样式，即：

  <ul class="mx-auto">
    <ListPerspectiveItem
      v-for="(alert, index) in alerts"
      :key="alert.id"
      :index="index"
      :alert="alert"
      :totalElements="alerts.length"
      :verticalShift="15"
      @close="remove(index)"
    />
    <div :style="notificationMsg"><slot></slot></div>
  </ul>

您计算出在通知下方显示消息所需的组件顶部总距离。

很遗憾，这要求您在父级（ListPerspective）组件中定义data() { return { verticalShift: 15 } }, computed: { notificationMsg() { return `position: absolute; top: ${(this.alerts.length + 1) * this.verticalShift}px; margin-top: 20px;`; } }并将其作为道具传递给 ListPerspectiveItem 。如果您是我，我会使用这样的基本配置创建一个简单的store，而不是在您的 ListPerspectiveItem 中将verticalShift硬编码为默认值，我将从商店中获取，在 ListPerspective 组件中执行相同的操作，即：

最后要做的是通过将消息添加到广告位来更新您的 App.vue ：

data() { 
// generally you should bind store state properties as computed properties, 
// but since it's a default, constant variable you shouldn't have to watch for it's changes
  return { verticalShift: this.$store.state.defaults.css.verticalShift }
}


verticalShift: {
  type: Number, default: this.$store.state.defaults.css.verticalShift
}

Example

Vue和CSS3：相对包装中的绝对位置会弄乱高度

2 个答案: