# Cube-Tip 提示气泡
# 介绍
用于弹出提示气泡框，可以通过配置控制弹出位置。
已适配RN
# 注意
rn时，需要给组件添加 style="position: static"或者使用虚拟节点 autoVirtualHostRules。
<!-- 添加style -->
<template>
<cube-tip style="position: static"></cube-tip>
</template>
1
2
3
4
2
3
4
// mpx.config.js
module.exports = defineConfig({
// ...
pluginOptions: {
mpx: {
plugin: {
// ...
autoVirtualHostRules: {
include: [resolve('node_modules/@mpxjs/mpx-cube-ui/lib/components/tip/index.mpx')]
}
},
}
}
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
# 示例
# 基础用法
通过在 Tip 组件上添加 ref 属性，获得对于组件的引用，然后调用 Tip 组件向外暴露出来的 show、hide 方法来控制组件的显示或隐藏。
<template>
<view class="tips-demo">
<cube-icon
class="cube-tip-demo-icon"
type="question"
bind:click="onIconClick"
/>
<cube-tip
ext-class-tip="{{ direction }}"
wx:ref="tip"
direction="{{ direction }}"
custom-style="{{ customStyle }}"
bind:close="onTipClose"
showClose="{{ showClose }}"
>
<view>this is tips</view>
</cube-tip>
<view class="tip-demo-close">
<view>是否显示关闭按钮：{{showClose}}</view>
<cube-switch wx:model="{{showClose}}"></cube-switch>
</view>
</view>
</template>
<script>
import { createComponent } from '@mpxjs/core'
createComponent({
data: {
index: 0,
direction: 'top',
customStyle: {},
showClose: false
},
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
70
71
72
73
74
75
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
70
71
72
73
74
75
# 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 |
| closeOnClickOutside | Boolean | - | false |
# 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-padding-top | 14px | - |
| $tip-padding-right | 38px | - |
| $tip-padding-bottom | 14px | - |
| $tip-padding-left | 14px | - |
| $tip-padding-right-without-close | 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 | 内容行高 |