# Bubble 气泡提示

## 介绍

Bubble 气泡提示, 常用于顶部胶囊按钮操作提醒

<img width="320" alt="vertical" src="https://films.qq.com/mp-ip-commercialize/bubble-exp.png">

## 代码演示

### 引入组件

```json
{
  "usingComponents": {
    "free-bubble": "/components/bubble/index"
  }
}
```

### 基础用法

```html
<free-bubble text="添加到我的小程序实时查看最新潮玩信息" />
```

### 自定义插槽

```html
<free-bubble>
  <view>添加到我的小程序实时查看最新潮玩信息</view>
</free-bubble>
```

### API

### Props

| 参数       | 说明                                                                     | 类型     | 默认值 |
| ---------- | ------------------------------------------------------------------------ | -------- | ------ |
| text       | 气泡文本内容                                                             | _string_ | -      |
| width      | 气泡宽度                                                                 | _string_ | -      |
| background | 气泡背景                                                                 | _string_ | -      |
| color      | 气泡字体颜色                                                             | _string_ | -      |
| mode       | 气泡位置模式 `default`、`custom`，默认模式的位置位于顶部胶囊按钮操作下方 | _string_ | -      |

> 当设置 mode='custom'属性，则不会自动计算位置，需要自己手动添加位置

### Slots

| 名称 | 说明                               |
| ---- | ---------------------------------- |
| --   | 气泡文本内容， text 属性为空时有效 |

### Events

| 事件名     | 说明           | 回调参数     |
| ---------- | -------------- | ------------ |
| bind:close | 关闭气泡时触发 | event: Event |

### 外部样式类

| 类名         | 说明         |
| ------------ | ------------ |
| custom-class | 根节点样式类 |

### CSS Var

可以通过设置 `css var`变量修改气泡提示 `UI`，更多变量请查看[样式表](./index.scss)

| 变量名               | 属性             | 说明             | 默认值               |
| -------------------- | ---------------- | ---------------- | -------------------- |
| --bubble-bg          | background-color | 气泡背景         | `rgba(0, 0, 0, 0.6)` |
| --bubble-width       | width            | 气泡宽度         | `300rpx`             |
| --bubble-text-color  | color            | 气泡字体颜色     | `#fff`               |
| --bubble-text-size   | font-size        | 气泡字体大小     | `24rpx`              |
| --bubble-top         | top              | 气泡顶部距离     | `80px`               |
| --bubble-right       | top              | 气泡右侧距离     | `16rpx`              |
| --bubble-arrow-right | right            | 气泡箭头水平位置 | `50px`               |