@wines/fab-button v1.5.1

@wines/fab-button

FabButton 浮动按钮

用于展现浮动按钮，预设 9 种颜色 light, stable, positive, calm, assertive, balanced, energized, royal, dark 可选用。

使用指南

在 page.json 中引入组件

{
  "navigationBarTitleText": "wux-fab-button",
  "usingComponents": {
    "wux-fab-button": "@wines/fab-button"
  }
}

示例

<view class="page">
	<view class="page__hd">
		<view class="page__title">FabButton</view>
		<view class="page__desc">浮动按钮</view>
	</view>
	<view class="page__bd">
		<wux-fab-button
		 position="topLeft"
		 theme="balanced"
		 direction="horizontal"
		 reverse
		 buttons="{{ buttons }}"
		 bind:change="onChange"
		 bind:click="onClick"
		 bind:contact="onContact"
		 bind:getuserinfo="onGotUserInfo"
		/>
		<wux-fab-button
		 position="topRight"
		 theme="balanced"
		 direction="vertical"
		 reverse
		 buttons="{{ buttons }}"
		 bind:change="onChange"
		 bind:click="onClick"
		 bind:contact="onContact"
		 bind:getuserinfo="onGotUserInfo"
		/>
		<wux-fab-button
		 position="bottomLeft"
		 theme="balanced"
		 direction="vertical"
		 buttons="{{ buttons }}"
		 bind:change="onChange"
		 bind:click="onClick"
		 bind:contact="onContact"
		 bind:getuserinfo="onGotUserInfo"
		/>
		<wux-fab-button
		 position="center"
		 theme="balanced"
		 direction="circle"
		 buttons="{{ buttons }}"
		 bind:change="onChange"
		 bind:click="onClick"
		 bind:contact="onContact"
		 bind:getuserinfo="onGotUserInfo"
		/>
		<wux-fab-button
		 position="bottomRight"
		 theme="balanced"
		 direction="horizontal"
		 buttons="{{ buttons }}"
		 bind:change="onChange"
		 bind:click="onClick"
		 bind:contact="onContact"
		 bind:getuserinfo="onGotUserInfo"
		/>
	</view>
</view>

import './index.less';

const icon =
  'data:image/png;base64,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';
const buttons = [
  {
    openType: 'getUserInfo',
    label: 'GetUserInfo',
    icon,
  },
  {
    openType: 'share',
    label: 'Share',
    icon,
  },
  {
    openType: 'contact',
    label: 'Contact',
    icon,
  },
  {
    label: 'View on Demo',
    icon,
  },
];

Page({
  data: {
    buttons,
  },
  onClick(e) {
    console.log('onClick', e.detail);
    if (e.detail.index === 3) {
      void wx.switchTab({
        url: '/pages/index/index',
      });
    }
  },
  onContact(e) {
    console.log('onContact', e);
  },
  onGotUserInfo(e) {
    console.log('onGotUserInfo', e);
  },
  onGotPhoneNumber(e) {
    console.log('onGotPhoneNumber', e);
  },
  onChange(e) {
    console.log('onChange', e);
  },
});

API

FabButton props

更多参数说明请参考微信官方的表单组件 Button。

FabButton slot

FabButton externalClasses