• Fab 悬浮按钮

    Fab 悬浮按钮

    悬浮按钮 fab button ，点击可展开一个图形按钮菜单。

    属性说明：

    属性名类型默认值说明
    patternobject可选样式配置项
    horizontalstring'left'水平对齐方式。left:左对齐，right：右对齐
    verticalstring'bottom'水平对齐方式。bottom:下对齐，top：上对齐
    directionstring'horizontal'展开菜单显示方式。horizontal:水平显示，vertical：垂直显示
    contentarray展开菜单内容配置项
    triggerfunction展开菜单点击事件，返回点击信息

    pattern配置项：

    参数类型默认值说明
    colorstring#3c3e49文字默认颜色
    selectedColorstring#007AFF文字选中时的颜色
    backgroundColorstring#ffffff背景色
    buttonColorstring#3c3e49按钮背景色

    content配置项：

    参数类型说明
    iconPathstring图片路径
    selectedIconPathstring选中后图片路径
    textstring文字
    activeboolean是否选中当前

    使用方法：

    在 template 中使用

    2. <template>
    3.     <view>
    4.         <uni-fab
    5.             :pattern="pattern"
    6.             :content="content"
    7.             :horizontal="horizontal"
    8.             :vertical="vertical"
    9.             :direction="direction"
    10.             @trigger="trigger"
    11.         ></uni-fab>
    12.     </view>
    13. </template>

    在 javascript 中使用

    2. import uniFab from '@/components/uni-fab.vue';
    3. export default {
    4.     data() {
    5.         return {
    6.             horizontal: 'left',
    7.             vertical: 'bottom',
    8.             direction: 'horizontal',
    9.             pattern: {
    10.                 color: '#7A7E83',
    11.                 backgroundColor: '#fff',
    12.                 selectedColor: '#007AFF',
    13.                 buttonColor:"#007AFF"
    14.             },
    15.             content: [
    16.                 {
    17.                     iconPath: '/static/component.png',
    18.                     selectedIconPath: '/static/componentHL.png',
    19.                     text: '组件',
    20.                     active: false
    21.                 },
    22.                 {
    23.                     iconPath: '/static/api.png',
    24.                     selectedIconPath: '/static/apiHL.png',
    25.                     text: 'API',
    26.                     active: false
    27.                 },
    28.                 {
    29.                     iconPath: '/static/template.png',
    30.                     selectedIconPath: '/static/templateHL.png',
    31.                     text: '模版',
    32.                     active: false
    33.                 }
    34.             ]
    35.         };
    36.     },
    37.     methods: {
    38.         trigger(e) {
    39.             console.log(e);
    40.             this.content[e.index].active = !e.item.active;
    41.             uni.showModal({
    42.                 title: '提示',
    43.                 content: `您${this.content[e.index].active?'选中了':'取消了'}${e.item.text}`,
    44.                 success: function(res) {
    45.                     if (res.confirm) {
    46.                         console.log('用户点击确定');
    47.                     } else if (res.cancel) {
    48.                         console.log('用户点击取消');
    49.                     }
    50.                 }
    51.             });
    52.         }
    53.     },
    54.     components: {
    55.         uniFab
    56.     }
    57. };

    Tips:

    • 不建议动态修改属性，可能会有影响。
    • 展开菜单暂不支持字体图标，使用图片路径时建议使用绝对路径，相对路径可能会有问题。
    • 选中状态要通过自己控制，如果不希望有选中状态，不处理 active 即可。
    • 展开菜单建议最多显示四个，如果过多对于小屏手机可能会超出屏幕。