通过css设置元素隐藏和显示

背景：鼠标悬浮时显示删除，放开后显示组件名

解决：通过display:none和display:block显示和隐藏元素；

使用 div +p选择器选择当前div的下一个紧跟的p元素

    <div v-if="!preview" class="name">{{propertyData.name}}</div>

    <!-- 删除按钮 -->
    <div v-if="!preview" class="delete">删除</div>

.component {
  position: relative;
  cursor: move;
  min-height: 40px;

  // name和delete显示效果
  .name,
  .delete {
    padding: 4px 12px;
    background: #fff;
    position: absolute;
    white-space: nowrap;
    border: 2px;
    height: 18px;
    border-radius: 2px;
    line-height: 18px;
    cursor: pointer;
    font-size: 12px;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
    color: #323232;
    left: 380px;
    top: 0;
    // 左侧设置透明的三角形
    &::before {
      content: "";
      line-height: 8px;
      position: absolute;
      left: -8px;
      // 父元素的一半9px
      top: 9px;
      // 一边设置透明
      border-width: 4px;
      border-style: solid;
      border-color: transparent #fff transparent transparent;
    }
  }

  // name和delete显示和隐藏交互
  .name {
    display: block;
  }
  .delete {
    display: none;
  }
  // 不能以name:hover 去让.delete显示，而是让父级hover时就显示delete,这样就不会在显示和隐藏之间反复横跳
  &:hover {
    .name {
      display: none;
    }
    // div+p选择所有紧跟在 <div> 元素之后的第一个 <p> 元素
    .delete {
      display: block;
    }
  }

}