Skip to content
On this page

Fab 悬浮按钮

悬浮动作按钮组件,按下可显示一组动作按钮。

因为uni-app组件无法监听点击自己以外的地方,为了在点击页面其他地方时,可以自动关闭 fab ,建议使用组件库的 useQueue hook(会关闭所有 dropmenu、popover、toast、swipeAction、fab),在页面的根元素上监听点击事件的冒泡。

WARNING

如果存在用户手动点击 fab 以外某个地方如按钮滑出 fab 的场景,则需要在点击的元素(在这里是按钮)加上 click.stop="" 阻止事件冒泡到根元素上,避免触发 closeOutside把要手动打开的 fab 关闭了。

基本用法

通过type设置悬浮按钮触发器的类型,position设置悬浮按钮触发器的位置,direction设置动作按钮的打开方向,disabled设置悬浮按钮是否禁用。

html
<wd-fab :disabled="disabled" :type="type" :position="position" :direction="direction">
  <wd-button @click="showToast('一键三连')" :disabled="disabled" custom-class="custom-button" type="primary" round>
    <wd-icon name="github-filled" size="22px"></wd-icon>
  </wd-button>
  <wd-button @click="showToast('我要收藏')" :disabled="disabled" custom-class="custom-button" type="success" round>
    <wd-icon name="star" size="22px"></wd-icon>
  </wd-button>

  <wd-button @click="showToast('我要投币')" :disabled="disabled" custom-class="custom-button" type="error" round>
    <wd-icon name="money-circle" size="22px"></wd-icon>
  </wd-button>
  <wd-button @click="showToast('我要点赞')" :disabled="disabled" custom-class="custom-button" type="warning" round>
    <wd-icon name="thumb-up" size="22px"></wd-icon>
  </wd-button>
</wd-fab>
ts
import { useToast } from '@/uni_modules/wot-design-uni'
const { show: showToast } = useToast()
const type = ref<'primary' | 'success' | 'info' | 'warning' | 'error' | 'default'>('primary')
const position = ref<'left-top' | 'right-top' | 'left-bottom' | 'right-bottom'>('left-bottom')
const direction = ref<'top' | 'right' | 'bottom' | 'left'>('top')
const disabled = ref<boolean>(false)
scss
:deep(.custom-button) {
    min-width: auto !important;
    box-sizing: border-box;
    width: 32px !important;
    height: 32px !important;
    border-radius: 16px !important;
    margin: 8rpx;
  }

  :deep(.custom-radio) {
    height: 32px !important;
    line-height: 32px !important;
  }

动作菜单展开/收起

通过v-model:active控制动作按钮菜单的展开/收起

html
<wd-fab v-model:active="active">
ts
const active = ref<boolean>(false)

Attributes

参数说明类型可选值默认值最低版本
v-model:active是否激活boolean-false0.1.57
type类型FabType'primary' | 'success' | 'info' | 'warning' | 'error' | 'default''primary'0.1.57
position悬浮按钮位置FabPosition'left-top' | 'right-top' | 'left-bottom' | 'right-bottom''right-bottom'0.1.57
direction悬浮按钮菜单弹出方向FabDirection'top' | 'right' | 'bottom' | 'left''top'0.1.57
disabled是否禁用boolean-false0.1.57
inactiveIcon悬浮按钮未展开时的图标string-'add'0.1.57
activeIcon悬浮按钮展开时的图标string-'close'0.1.57
zIndex自定义悬浮按钮层级number-990.1.57
customStyle自定义样式string-''0.1.57

外部样式类

类名说明最低版本
custom-class自定义样式类0.1.57

Released under the MIT License.

Released under the MIT License.