Tooltip 提示框

基础使用

这是 Tooltip 的基础例子

<script setup lang="ts">
function onChange(change: boolean) {
  console.log('组件是否展示:', change)
}

function clickOutside(isClick: boolean) {
  console.log('组件外发生点击:', isClick)
}
</script>

<template>
  <div style="display: flex;gap: 10px">
    <np-tooltip content="向上展示">
      <np-button>默认配置</np-button>
    </np-tooltip>

    <np-tooltip content="向下展示" placement="bottom">
      <np-button>向下展示</np-button>
    </np-tooltip>

    <np-tooltip trigger="click" :options="{ placement: 'left' }" @on-change="onChange">
      <np-button>
        鼠标点击
      </np-button>
      <template #content>
        <span>向左展示</span>
      </template>
    </np-tooltip>

    <np-tooltip trigger="click" placement="right" content="插槽优先级高" @click-outside="clickOutside">
      <np-button>
        鼠标点击
      </np-button>
      <template #content>
        <span>向右展示</span>
      </template>
    </np-tooltip>

    <np-tooltip trigger="click" placement="bottom" class="tooltip-demo">
      <np-button>
        嵌套扩展
      </np-button>
      <template #content>
        <ul class="selector-demo">
          <li>请选择</li>
          <li>北京</li>
          <li>天津</li>
          <li>上海</li>
          <li>重庆</li>
        </ul>
      </template>
    </np-tooltip>
  </div>
</template>

<style lang="less">
.tooltip-demo {
  .np-tooltip__popper {
    padding: 0;
  }
}
</style>

<style lang="less" scoped>
.tooltip-demo {
  .selector-demo {
    padding: 6px 0;
    width: 120px;
    position: relative;
    z-index: 1;

    li {
      padding: 8px;

      &:hover {
        background: #999;
      }
    }
  }
}
</style>

属性说明

属性	属性描述	类型	默认值
trigger	触发事件	hover | click	hover
content	slot#content	string	null
placement	箭头方向	top | right | bottom | left	top

事件说明

事件	事件描述	类型
@onChange	展示/隐藏时触发	(e: 'on-change', value: boolean): void