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 即可。
  • 展开菜单建议最多显示四个，如果过多对于小屏手机可能会超出屏幕。