Popover 气泡框

弹出气泡式的卡片浮层。

使用指南

在 page.json 中引入组件

  1. {
  2.     "navigationBarTitleText": "Popover",
  3.     "usingComponents": {
  4.         "wux-popover": "../../dist/popover/index"
  5.     }
  6. }

示例

  1. <view class="page">
  2.     <view class="page__hd">
  3.         <view class="page__title">Popover</view>
  4.         <view class="page__desc">气泡框</view>
  5.     </view>
  6.     <view class="page__bd">
  7.         <view class="sub-title">Placement</view>
  8.         <view class="button-sp-area">
  9.             <wux-popover placement="topLeft" title="Title" content="Content">
  10.                 <button size="mini">topLeft</button>
  11.             </wux-popover>
  12.         </view>
  13.         <view class="button-sp-area">
  14.             <wux-popover placement="top" title="Title" content="Content">
  15.                 <button size="mini">top</button>
  16.             </wux-popover>
  17.         </view>
  18.         <view class="button-sp-area">
  19.             <wux-popover placement="topRight" title="Title" content="Content">
  20.                 <button size="mini">topRight</button>
  21.             </wux-popover>
  22.         </view>
  23.         <view class="button-sp-area text-left">
  24.             <wux-popover placement="rightTop" title="Title" content="Content">
  25.                 <button size="mini">rightTop</button>
  26.             </wux-popover>
  27.         </view>
  28.         <view class="button-sp-area text-left">
  29.             <wux-popover placement="right" title="Title" content="Content">
  30.                 <button size="mini">right</button>
  31.             </wux-popover>
  32.         </view>
  33.         <view class="button-sp-area text-left">
  34.             <wux-popover placement="rightBottom" title="Title" content="Content">
  35.                 <button size="mini">rightBottom</button>
  36.             </wux-popover>
  37.         </view>
  38.         <view class="button-sp-area">
  39.             <wux-popover placement="bottomRight" title="Title" content="Content">
  40.                 <button size="mini">bottomRight</button>
  41.             </wux-popover>
  42.         </view>
  43.         <view class="button-sp-area">
  44.             <wux-popover placement="bottom" title="Title" content="Content">
  45.                 <button size="mini">bottom</button>
  46.             </wux-popover>
  47.         </view>
  48.         <view class="button-sp-area">
  49.             <wux-popover placement="bottomLeft" title="Title" content="Content">
  50.                 <button size="mini">bottomLeft</button>
  51.             </wux-popover>
  52.         </view>
  53.         <view class="button-sp-area text-right">
  54.             <wux-popover placement="leftBottom" title="Title" content="Content">
  55.                 <button size="mini">leftBottom</button>
  56.             </wux-popover>
  57.         </view>
  58.         <view class="button-sp-area text-right">
  59.             <wux-popover placement="left" title="Title" content="Content">
  60.                 <button size="mini">left</button>
  61.             </wux-popover>
  62.         </view>
  63.         <view class="button-sp-area text-right">
  64.             <wux-popover placement="leftTop" title="Title" content="Content">
  65.                 <button size="mini">leftTop</button>
  66.             </wux-popover>
  67.         </view>
  68.         <view class="sub-title">Default Visible</view>
  69.         <view class="button-sp-area text-left">
  70.             <wux-popover default-visible="{{ true }}" placement="rightBottom" title="Title" content="Content">
  71.                 <button size="mini">rightBottom</button>
  72.             </wux-popover>
  73.         </view>
  74.         <view class="sub-title">Custom style</view>
  75.         <view class="button-sp-area">
  76.             <wux-popover placement="top" title="Title" content="Content" body-style="width: 300px;">
  77.                 <button size="mini">top</button>
  78.             </wux-popover>
  79.         </view>
  80.         <view class="sub-title">Theme = dark</view>
  81.         <view class="button-sp-area">
  82.             <wux-popover theme="dark" placement="top" title="Title" content="Content">
  83.                 <button size="mini">top</button>
  84.             </wux-popover>
  85.         </view>
  86.         <view class="sub-title">Slot</view>
  87.         <view class="button-sp-area">
  88.             <wux-popover placement="top">
  89.                 <button size="mini">top</button>
  90.                 <view slot="title" style="color: red;">Title</view>
  91.                 <view slot="content">Content</view>
  92.             </wux-popover>
  93.         </view>
  94.         <view class="sub-title">Controlled</view>
  95.         <view class="button-sp-area">
  96.             <wux-popover visible="{{ visible }}" controlled placement="top" title="Title" bind:change="onChange">
  97.                 <view slot="content" bindtap="hide">Close</view>
  98.                 <button size="mini">top</button>
  99.             </wux-popover>
  100.         </view>
  101.     </view>
  102. </view>
  1. Page({
  2.     data: {
  3.         visible: false,
  4.     },
  5.     hide() {
  6.         this.setData({
  7.             visible: false,
  8.         })
  9.     },
  10.     onChange(e) {
  11.         console.log('onChange', e)
  12.         this.setData({
  13.             visible: e.detail.visible,
  14.         })
  15.     },
  16. })

视频演示

Popover

API

Popover props

参数 类型 描述 默认值
prefixCls string 自定义类名前缀 wux-popover
classNames any 过渡的类名，更多内置过渡效果请参考 AnimationGroup wux-animate—fadeIn
theme string 气泡框主题，可选值为 light、dark light
title string 提示标题 -
content string 提示内容 -
bodyStyle string,object 自定义样式 -
defaultVisible boolean 默认是否显隐，当 controlled 为 false 时才生效 false
placement string 气泡框位置，可选值为 top、left、right、bottom、topLeft、topRight、bottomLeft、bottomRight、leftTop、leftBottom、rightTop、rightBottom top
trigger string 触发行为，可选值为 click click
visible boolean 用于手动控制浮层显隐，当 controlled 为 true 时才生效 false
controlled boolean 是否受控 说明文档 false
mask boolean 是否显示蒙层 false
maskClosable boolean 点击蒙层是否允许关闭 true
bind:change function 显示隐藏的回调函数 -

Popover slot

名称 描述
- 自定义内容
title 自定义提示标题
content 自定义提示内容

Popover externalClasses

名称 描述
wux-class 根节点样式类