Tooltip 文字提示

一、概述

定义

简单的文字提示气泡框。

使用场景

• 常用于解释操作按钮/打点字段的的文字说明

交互说明

• 鼠标移入则立即显示提示，移出则立即消失

• 不承载复杂文本和操作

二、 基础样式

简单的文字提示。

<template>
  <se-tooltip :content="content">
    <se-button type="default">移入鼠标查看提示</se-button>
  </se-tooltip>
</template>
<script>
  export default {
    data() {
      return {
        content: '最多显示十八个文字不可折行；文字文字最多显示十八个文字不可折行；文字文字'
      }
    }
  }
</script>

三、 提示位置

根据使用场景，提供 12 种不同方向。

<div class="demo-placement">
  <div v-for="(item, key) in directions" :class="key" :key="key">
    <se-tooltip v-for="dir in item" :key="dir[0]" :placement="dir[0]" content="深院静，小庭空。">
      <se-button>{{dir[1]}}</se-button>
    </se-tooltip>
  </div>
</div>
<script>
  export default {
    data() {
      return {
        directions: {
          top: [['top-left', '上左'], ['top', '上边'], ['top-right', '上右']],
          left: [['left-top', '左上'], ['left', '左边'], ['left-bottom', '左下']],
          right: [['right-top', '右上'], ['right', '右边'], ['right-bottom', '右下']],
          bottom: [['bottom-left', '下左'], ['bottom', '下边'], ['bottom-right', '下右']]
        }
      }
    }
  }
</script>
<style scoped>
  .demo-placement {
    width: 500px;
  }
  .se-button {
    margin: 10px;
  }
  .top {
    text-align: center;
  }
  .left,
  .right {
    float: left;
    width: 120px;
    line-height: 3;
  }
  .right {
    float: right;
  }
  .bottom {
    clear: both;
    text-align: center;
  }
  .top .se-button + .se-button,
  .bottom .se-button + .se-button {
    margin-left: 10px;
  }
  .right {
    text-align: right;
  }
</style>

四、 控制显示状态

组件内部默认维护了一个控制显示隐藏的状态。当然，你也可以通过 visible 属性自行控制。

<template>
  <se-tooltip :content="content" visible>
    <se-button type="default">移入鼠标查看提示</se-button>
  </se-tooltip>
</template>

<script>
  export default {
    data() {
      return {
        content: '最多显示十八个文字不可折行；文字文字最多显示十八个文字不可折行；文字文字'
      }
    }
  }
</script>

五、 事件与状态同步

当 tooltip 的展示状态发生变化时（理论上），我们会向外 emit 一个 visibility-change 事件。

<template>
  <se-tooltip :content="content" :visible="visible" @visibility-change="visibilityChange">
    <se-button type="default">移入鼠标查看提示</se-button>
  </se-tooltip>
</template>

<script>
  export default {
    data() {
      return {
        visible: false,
        content: '最多显示十八个文字不可折行；文字文字最多显示十八个文字不可折行；文字文字'
      }
    },

    methods: {
      visibilityChange(visible) {
        this.visible = visible
      }
    }
  }
</script>

另外，还可以使用 sync 修饰符实现状态自动同步。

<template>
  <se-tooltip :content="content" :visible_sync="visible">
    <se-button type="default">移入鼠标查看提示</se-button>
  </se-tooltip>
</template>

<script>
  export default {
    data() {
      return {
        visible: false,
        content: '最多显示十八个文字不可折行；文字文字最多显示十八个文字不可折行；文字文字'
      }
    }
  }
</script>

Props

位置可选值

const placementTypes = [
  'top-left',
  'top',
  'top-right',

  'right-top',
  'right',
  'right-bottom',

  'bottom-right',
  'bottom',
  'bottom-left',

  'left-top',
  'left',
  'left-bottom'
]

Events

Slots