Fab 悬浮动作按钮
悬浮动作按钮组件，按下可显示一组动作按钮。
地址
先看交互效果
基本用法
通过type设置悬浮按钮触发器的类型，position设置悬浮按钮触发器的位置，direction设置动作按钮的打开方向，disabled设置悬浮按钮是否禁用。
<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>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) :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控制动作按钮菜单的展开/收起
<wd-fab v-model:active="active">const active = ref<boolean>(false)
Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
|---|---|---|---|---|---|
| v-model:active | 是否激活 | boolean | - | false | 0.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 | - | false | 0.1.57 |
| inactiveIcon | 悬浮按钮未展开时的图标 | string | - | 'add' | 0.1.57 |
| activeIcon | 悬浮按钮展开时的图标 | string | - | 'close' | 0.1.57 |
| zIndex | 自定义悬浮按钮层级 | number | - | 99 | 0.1.57 |
| customStyle | 自定义样式 | string | - | '' | 0.1.57 |
外部样式类
| 类名 | 说明 | 最低版本 |
|---|---|---|
| custom-class | 自定义样式类 | 0.1.57 |
