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 默认是否显隐,当 controlledfalse 时才生效 false
placement string 气泡框位置,可选值为 top、left、right、bottom、topLeft、topRight、bottomLeft、bottomRight、leftTop、leftBottom、rightTop、rightBottom top
trigger string 触发行为,可选值为 click click
visible boolean 用于手动控制浮层显隐,当 controlledtrue 时才生效 false
controlled boolean 是否受控 说明文档 false
mask boolean 是否显示蒙层 false
maskClosable boolean 点击蒙层是否允许关闭 true
bind:change function 显示隐藏的回调函数 -

Popover slot

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

Popover externalClasses

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