<!-- 弹框 -->
<template>
  <div class="topo_tooltip">
    <div v-if="havItem" class="tooltip-card">
      <ul>
        <li>编辑</li>
        <li>锁定</li>
        <li>置顶</li>
        <li>置底</li>
        <li>删除</li>
      </ul>
    </div>
    <div v-else class="tooltip-card">
      <ul>
        <li>保存</li>
        <li>发布</li>
        <li>下载</li>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  props: ["havItem"],
  name: "topoTooltip",
  data() {
    return {};
  },
};
</script>
<style lang="less" scoped>
ul,
li {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
.topo_tooltip {
  position: relative;
  .tooltip-card {
    border: 1px solid #e4e5e7;
    border-radius: 4px;
    box-shadow: 0 2px 10px rgba(31, 35, 41, 0.1);
    background: #fff;
    font-size: 0;
    ul {
      li {
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: relative;
        width: 100px;
        box-sizing: border-box;
        border-radius: 0;
        padding: 8px 0 8px 12px;
        cursor: pointer;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        background: #ffff;
        color: #1f2328;
        font-size: 12px;
      }
      li:hover {
        background: #f5f6f7;
      }
    }
  }
}
</style>