Tip

提示，用于弹出提示气泡框。

示例

基础使用

通过在 Tip 组件上添加 ref 属性，获得对于组件的引用，然后调用 Tip 组件向外暴露出来的 show、hide 方法来控制组件的显示或隐藏。

  1. <cube-button :inline="true" :outline="true" :primary="true" @click="- refs.tip.show()">Show tip</cube-button>
  2. <cube-tip ref="tip" direction="bottom" style="left:123px;top:-50px;">Tip</cube-tip>

小三角和气泡框的位置

通过 direction 属性配置小三角的方向，一般情况下需要通过 style 改变气泡框的位置；一般来说，小三角的方向是与气泡框的位置相反的。

  1. <p class="tip-eg">
  2.   <span>cube-ui</span>
  3.   <cube-tip ref="tip2" :direction="direction" :style="tipStyle" @close="close" @click="clickHandler">
  4.     </cube-tip></p><div>Awesome!</div>
  6. <p></p>
  7. <cube-button @click="showTip('bottom')">top</cube-button>
  8. <cube-button @click="showTip('top')">bottom</cube-button>
  9. <cube-button @click="showTip('right')">left</cube-button>
  10. <cube-button @click="showTip('left')">right</cube-button>
  1. export default {
  2.   data() {
  3.     return {
  4.       direction: '',
  5.       tipStyle: ''
  6.     }
  7.   },
  8.   methods: {
  9.     showTip(direction) {
  10.       this.direction = direction
  11.       this.- refs.tip2.show()
  13.       switch (direction) {
  14.         case 'top':
  15.           this.tipStyle = 'left: 100px; top: 30px;'
  16.           break
  17.         case 'bottom':
  18.           this.tipStyle = 'left: 100px; top: -50px;'
  19.           break
  20.         case 'left':
  21.           this.tipStyle = 'left: 200px; top: -10px;'
  22.           break
  23.         case 'right':
  24.           this.tipStyle = 'left: 2px; top: -10px;'
  25.           break
  26.       }
  27.     },
  28.     close() {
  29.       console.log('click close button')
  30.     },
  31.     clickHandler() {
  32.       console.log('click tip area')
  33.     }
  34.   }
  35. }

Props 配置

参数 说明 类型 可选值 默认值
direction 小三角的方向 String top/bottom/left/right left
offsetLeft 小三角至 Tip 框左边距离 Number/String - 0
offsetTop 小三角至 Tip 框顶部距离 Number/String - 0
offsetRight 小三角至 Tip 框右边距离 Number/String - 0
offsetBottom 小三角至 Tip 框底部距离 Number/String - 0

其中 offsetLeft、offsetTop、offsetRight、offsetBottom 的值如果是数字，那么单位就是像素，如果说是字符串，则认为是设置的百分比。

事件

参数 说明 参数
close 点击 Tip 的关闭按钮 -
click 点击 Tip 的提示内容部分 -

原文:

https://didi.github.io/cube-ui/#/zh-CN/docs/tip