mpx-cube-ui

# Cube-Tip 提示气泡

# 介绍

用于弹出提示气泡框，可以通过配置控制弹出位置。

# 示例

# 基础用法

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

收起 
<template>
  <view class="tips-demo">
    <cube-icon
      class="cube-tip-icon"
      type="question"
      bind:click="onIconClick"
    />
    <cube-tip
      ext-class-tip="{{ direction }}"
      wx:ref="tip"
      direction="{{ direction }}"
      custom-style="{{ customStyle }}"
      bind:close="onTipClose"
    >
      <view>this is tips</view>
    </cube-tip>
  </view>
</template>

<script>
import { createComponent } from '@mpxjs/core'

createComponent({
  data: {
    index: 0,
    direction: 'top',
    customStyle: {}
  },
  methods: {
    onIconClick() {
      const dirs = ['top', 'right', 'bottom', 'left']
      this.direction = dirs[this.index++]
      if (this.index === 4) {
        this.index = 0
      }
      switch (this.direction) {
        case 'bottom':
          this.customStyle = {
            left: '96px',
            top: '-55px'
          }
          break
        case 'top':
          this.customStyle = {
            left: '96px',
            top: '40px'
          }
          break
        case 'right':
          this.customStyle = {
            left: '13px',
            top: '-8px'
          }
          break
        case 'left':
          this.customStyle = {
            left: '178px',
            top: '-9px'
          }
          break
      }
      this.$refs.tip.show()
    },
    onTipClose() {
      console.log('close the tip')
    }
  }
})
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69

# Props

参数 说明 类型 可选值 默认值
themeType 用于生成最外层类名 如原类名为 cube-component，添加 themeType = demo 后，类名变为 cube-component cube-component-demo String - -
visible 遮盖层初始状态是否可见 Boolean - false
direction 小三角的方向 String top/bottom/left/right top
customStyle Tip 的行内样式 Object - -
angStyle 小三角的行内样式 Object - -
showClose 是否展示关闭 Icon Boolean - true

# Events

事件名 说明 参数
toggle 显示/隐藏时触发 event.detail = { value }， 表当前状态是显示还是隐藏
click 点击时触发 -
close 点击关闭按钮触发 -

# Slots

插槽名 说明
— (默认插槽) 默认插槽

# Methods

组件实例方法 说明 参数 返回值
show 显示 - -
hide 隐藏 - -

# CSS Variable

变量名 默认值 含义
$tip-dark-opacity-bgc
rgba(0, 0, 0, 0.8)
 -
$tip-color 文字颜色
$tip-bgc 背景颜色
$tip-z-index
10
 叠层上下文层级
$tip-padding
14px 38px 14px 14px
 内边距
$tip-max-height
60px
 最大高度
$tip-border-radius
7px
 圆角
$tip-vertical-reverse-margin
-6px
 水平方向三角外边距位置
$tip-horizontal-reverse-margin
-9px
 竖直方向三角外边距位置
$tip-angle-border-width
0 6px 6px 6px
 三角边框线宽
$tip-angle-border-style
solid
 三角边框样式
$tip-angle-border-color 三角边框颜色
$tip-close-right
14px
 关闭按钮距离右边框位置
$tip-close-top
11px
 关闭按钮距离上边框位置
$tip-close-width
12px
 关闭按钮宽度
$tip-close-height
12px
 关闭按钮高度
$tip-close-scale
1.3
 关闭按钮缩放比
$tip-content-min-height
18px
 内容最小高度
$tip-content-line-height
18px
 内容行高

← RadioModal →