扩展组件（uni-ui）之uni-fab

uni-fab 是 uni-app 的 uni-ui 组件库中的一个浮动按钮组件（Floating Action Button，简称 FAB）。这种按钮通常用于页面上的主要操作，如添加、编辑、分享等，并在视觉上突出显示。

基本用法

在使用 uni-fab 之前，你需要确保已经正确安装了 uni-ui 库，并在页面中引入了 uni-fab 组件。

引入组件

<template>
    <uni-fab @click="onClickFab"></uni-fab>
</template>

<script>
    import uniFab from '@dcloudio/uni-ui/lib/uni-fab/uni-fab.vue'
    export default {
        components: { uniFab },
        methods: {
            onClickFab() {
                console.log('点击了 FAB');
            }
        }
    }
</script>

属性

• position：按钮的位置，可选值为 right-bottom（右下，默认）、right-top（右上）、left-bottom（左下）、left-top（左上）等。
• icon：按钮内图标的类名，如 uni-icons-plus。
• background-color：按钮的背景色。
• open-type：微信小程序专用的开放能力。
• direction：子按钮展开的方向，可选值为 top、bottom、left、right。

事件

• click：点击浮动按钮时触发的事件。

示例

创建一个基础的 FAB：

<uni-fab icon="uni-icons-plus" background-color="#007aff" @click="onClickFab"></uni-fab>

在这个示例中，创建了一个带有加号图标和蓝色背景的 FAB。点击按钮时，会执行 onClickFab 方法。

注意事项

• uni-fab 组件适合用于页面的主要操作，其在页面中的位置应该便于用户访问。
• 可以通过 icon 属性设置按钮内的图标，通过 background-color 属性自定义按钮颜色。
• 在微信小程序中，open-type 属性可以实现一些开放能力，如分享、获取用户信息等。

更多关于 uni-fab 组件的使用细节，可以查阅 uni-ui 官方文档 或 uni-ui 库的相关文档。