title: 气泡框 Popover

气泡框 Popover(即将上线)

弹出气泡式提示框。

气泡是一个在移动app（手机app，webApp，小程序，H5）里常见的组件，它由你自定义的事件去触发，显示在某一个元素的周围，可以是上下左右四个方位。

基本案例

气泡框可通过设置show属性为true、false来控制显示和隐藏，不设置则显示状态默认为false。

示例代码

<l-popover show="{{show}}">
  <view bindtap="handleShow">点击提示</view>
</l-popover>

handleShow() {
  this.setData({ show: true })
}

设置气泡的类型

气泡框的类型有两种，text和list，通过type属性来控制。

::: tip 注意事项

• 当type为text时，设置text属性就可以在气泡内显示文本内容。
• 当type为list时，气泡框内显示的是一个列表，你可以传入一个数组去渲染它，当list的内容超过了气泡的默认最大值后，气泡框内会出现一个可以纵向滚动的滚动条，你可以滑动它来查看超出部分的内容。 :::

示例代码

<l-popover show="{{true}}" type="text" text="哈哈哈！">
  <view>点击提示</view>
</l-popover>
<l-popover show="{{true}}" type="list" list="{{ arr }}">
  <view>点击提示</view>
</l-popover>

data: {
  arr: [
    'A',
    'B',
    'C',
    'D'
  ]
}

气泡出现的方位

我们可以通过设置 placement 属性的值来改变气泡出现的方位，可选值为top、left、right、bottom、topLeft、topRight、bottomLeft、bottomRight、leftTop、leftBottom、rightTop、rightBottom，默认top。

示例代码

<l-popover show="{{true}}" placement="left">
  <view>点击提示</view>
</l-popover>

气泡的背景色

气泡的背景色可以通过设置bgColor来改变，默认为黑色半透明背景色（rgba(0, 0, 0, 0.5）。

示例代码

<l-popover show="{{true}}" bgColor="rgba(0, 0, 0, .6)">
  <view>点击提示</view>
</l-popover>

设置子节点

我们在使用的组件的时候，可以根据使用场景,自由的在气泡框组件内插入 <image> <view> <text> 等子节点，当然，你也可以在其中插入 自定义组件 。

设置是否点击关闭

气泡框可以通过设置 locked 属性的值为true 或者 false 来设置他是否可以被点击关闭，默认为 true

::: tip 注意事项 如果设置为 true ，点击气泡框的时候会将其关闭 :::

示例代码

<l-mask show="{{true}}" locked="{{true}}">
    <view class="mask-content">
      <view class="mask-text" >取消子节点的垂直居中</view>
    </view>
</l-mask>

锁定Popover

设置按钮的 locked 属性来控制气泡框的锁定态，属性值为 true 时点击气泡框部分不会关闭，属性值为 false 时点击气泡框会立即关闭，默认为 true。

示例代码

<l-popover show="{{true}}" locked="true">
  <view>点击提示</view>
</l-popover>

气泡框属性

::: tip 注意事项 Popover组件使用cover-view来绘制，层级最高，可以覆盖微信的一些原生组件。 :::

气泡框外部样式类

气泡框事件