feat(fab): 悬浮按钮支持拖拽

Tencent#2374

src/fab/_example/fab.json

@@ -4,6 +4,7 @@
   "usingComponents": {
     "t-button": "tdesign-miniprogram/button/button",
     "base": "./base",
-    "advance": "./advance"
+    "advance": "./advance",
+    "movable": "./movable"
   }
 }

src/fab/_example/fab.wxml

@@ -14,6 +14,14 @@
     </t-button>
   </view>
 </t-demo>
+<t-demo desc="可移动悬浮按钮">
+  <view class="wrapper">
+    <t-button theme="primary" size="large" block variant="outline" bind:tap="handleChange" data-type="movable">
+      可移动悬浮按钮
+    </t-button>
+  </view>
+</t-demo>
 
 <base wx:if="{{type == 'base'}}" />
-<advance wx:else />
+<advance wx:elif="{{type == 'advance'}}" />
+<movable wx:else />

src/fab/_example/movable/index.js

@@ -0,0 +1,10 @@
+Component({
+  methods: {
+    handleClick(e) {
+      console.log(e);
+    },
+    handleMove(e) {
+      console.log(e);
+    },
+  },
+});

src/fab/_example/movable/index.json

@@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+    "t-fab": "tdesign-miniprogram/fab/fab"
+  }
+}

src/fab/_example/movable/index.wxml

@@ -0,0 +1,8 @@
+<t-fab
+  icon="gesture-press"
+  text="拖我"
+  bind:click="handleClick"
+  bind:move="handleMove"
+  aria-label="增加"
+  movable="{{true}}"
+></t-fab>

src/fab/fab-button.wxml

@@ -0,0 +1,5 @@
+<import src="../common/template/button.wxml" />
+<template
+  is="button"
+  data="{{ ...baseButtonProps, icon, ...buttonProps, externalClass: prefix + '-fab__button', content: text, ariaLabel}}"
+/>

src/fab/fab.less

@@ -9,3 +9,18 @@
     box-shadow: @fab-shadow;
   }
 }
+
+.@{prefix}-fab-movable_area {
+  position: fixed;
+  pointer-events: none;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.@{prefix}-fab-movable_view {
+  pointer-events: auto;
+  height: auto;
+  width: auto;
+}

src/fab/fab.ts

@@ -1,9 +1,13 @@
 import { SuperComponent, wxComponent } from '../common/src/index';
 import config from '../common/config';
 import props from './props';
+import { getRect } from '../common/utils';
 
+const systemInfo = wx.getSystemInfoSync();
 const { prefix } = config;
 const name = `${prefix}-fab`;
+const defRight = 16;
+const defBottom = 32;
 
 @wxComponent()
 export default class Fab extends SuperComponent {
@@ -19,23 +23,48 @@ export default class Fab extends SuperComponent {
       shape: 'circle',
       theme: 'primary',
     },
+    baseMovableViewProps: {
+      direction: 'all',
+      inertia: false,
+      disabled: false,
+    },
+    defRight,
+    defBottom,
+    movableViewX: systemInfo.windowWidth - (40 + defRight), // 默认fab宽度为40
+    movableViewY: systemInfo.windowHeight - (40 + defBottom), // 默认fab高度为40
   };
 
   observers = {
     text(val) {
-      if (val) {
-        this.setData({
-          baseButtonProps: {
-            shape: 'round',
-          },
+      if (!val) return;
+      this.setData({
+        baseButtonProps: { ...this.data.baseButtonProps, shape: 'round' },
+      });
+    },
+    movableViewProps(val) {
+      this.setData({
+        baseMovableViewProps: { ...this.data.baseMovableViewProps, ...val },
+      });
+    },
+    'buttonProps, icon, text'() {
+      if (!this.properties.movable) return;
+      wx.nextTick(() => {
+        getRect(this, `.${this.data.classPrefix}-movable_view`).then(({ height, width }) => {
+          this.setData({
+            movableViewX: systemInfo.windowWidth - (width + defRight),
+            movableViewY: systemInfo.windowHeight - (height + defBottom),
+          });
         });
-      }
+      });
     },
   };
 
   methods = {
     onTplButtonTap(e) {
       this.triggerEvent('click', e);
     },
+    movableViewMove(e) {
+      this.triggerEvent('move', e);
+    },
   };
 }

src/fab/fab.wxml

@@ -1,12 +1,24 @@
-<import src="../common/template/button.wxml" />
 <wxs src="../common/utils.wxs" module="_" />
 
-<view
-  class="{{classPrefix}} class {{prefix}}-class"
-  style="right: 16px; bottom: 32px; {{_._style([style, customStyle])}}"
->
-  <template
-    is="button"
-    data="{{ ...baseButtonProps, icon, ...buttonProps, externalClass: prefix + '-fab__button', content: text, ariaLabel}}"
-  />
+<view>
+  <view
+    wx:if="{{!movable}}"
+    class="{{classPrefix}} class {{prefix}}-class"
+    style="right: {{defRight}}px; bottom: {{defBottom}}px; {{_._style([style, customStyle])}}"
+  >
+    <include src="./fab-button.wxml" />
+  </view>
+  <movable-area wx:else class="{{classPrefix}}-movable_area" style="{{_._style([style, customStyle])}}">
+    <movable-view
+      class="{{classPrefix}}-movable_view"
+      direction="{{baseMovableViewProps.direction}}"
+      inertia="{{baseMovableViewProps.inertia}}"
+      x="{{baseMovableViewProps.x === undefined ? movableViewX : baseMovableViewProps.x}}"
+      y="{{baseMovableViewProps.y === undefined ? movableViewY : baseMovableViewProps.y}}"
+      disabled="{{baseMovableViewProps.disabled}}"
+      bindchange="movableViewMove"
+    >
+      <include src="./fab-button.wxml" />
+    </movable-view>
+  </movable-area>
 </view>

src/fab/props.ts

@@ -20,6 +20,15 @@ const props: TdFabProps = {
     type: String,
     value: '',
   },
+  /** 是否可移动 */
+  movable: {
+    type: Boolean,
+    value: false,
+  },
+  /** 可拖动配置 */
+  movableViewProps: {
+    type: Object,
+  },
 };
 
 export default props;

src/fab/type.ts

@@ -36,4 +36,32 @@ export interface TdFabProps {
     type: StringConstructor;
     value?: string;
   };
+  /**
+   * 是否可移动
+   * @default false
+   */
+  movable?: {
+    type: BooleanConstructor;
+    value?: boolean;
+  };
+  /**
+   * 可拖动配置
+   */
+  movableViewProps?: {
+    type: ObjectConstructor;
+    value?: movableViewProps;
+  };
+}
+
+export interface movableViewProps {
+  /** 移动方向 */
+  direction?: 'all' | 'vertical' | 'horizontal' | 'none';
+  /** 是否带有惯性 */
+  inertia?: boolean;
+  /** 定义x轴方向的偏移，单位支持px（默认）、rpx */
+  x?: number | string;
+  /** 定义y轴方向的偏移，单位支持px（默认）、rpx */
+  y?: number | string;
+  /** 是否禁用 */
+  disabled?: boolean;
 }