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

解决：通过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;// 父元素的一半9pxtop: 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;}}}