fix(fab): using new dom

site/mobile/components/demo-block.vue

@@ -40,4 +40,6 @@ const slotClassName = computed(() => [
     ['with-padding']: props.padding,
   },
 ]);
+
+console.log(props.padding);
 </script>

src/fab/demos/advance.vue

@@ -0,0 +1,15 @@
+<template>
+  <t-fab :icon="iconFunc" text="按钮文字" :style="customStyle" @click="onClick" />
+</template>
+
+<script lang="ts" setup>
+import { h } from 'vue';
+import { AddIcon } from 'tdesign-icons-vue-next';
+
+const iconFunc = () => h(AddIcon, { size: '24px' });
+
+const customStyle = 'right: 16px; bottom: 32px;';
+const onClick = () => {
+  console.log('click Fab');
+};
+</script>

src/fab/demos/display.vue → src/fab/demos/base.vue

@@ -1,17 +1,13 @@
 <template>
-  <div>
-    <t-fab :icon="iconFunc" @click="onClick" />
-  </div>
+  <t-fab :icon="iconFunc" @click="onClick" />
 </template>
 
 <script lang="ts" setup>
 import { h } from 'vue';
 import { AddIcon } from 'tdesign-icons-vue-next';
 
-const iconFunc = () => h(AddIcon);
+const iconFunc = () => h(AddIcon, { size: '24px' });
 const onClick = () => {
   console.log('click Fab');
 };
 </script>
-
-<style lang="less" scoped></style>

src/fab/demos/mobile.vue

@@ -2,24 +2,36 @@
   <div class="tdesign-mobile-demo">
     <h1 class="title">Fab 悬浮按钮</h1>
     <p class="summary">当功能使用图标即可表示清楚时，可使用纯图标悬浮按钮，例如：添加、发布。</p>
-    <tdesign-demo-block title="01 类型" summary="纯图标悬浮按钮">
-      <div class="toast-demo">
-        <t-button block size="large" variant="outline" @click="changeType('base')">基础使用</t-button>
-        <t-button block size="large" variant="outline" @click="changeType('advanced')">进阶使用</t-button>
-      </div>
+    <tdesign-demo-block title="01 组件类型" summary="纯图标悬浮按钮" :padding="true">
+      <t-button v-bind="btnProps" @click="changeType('base')">纯图标悬浮按钮</t-button>
+    </tdesign-demo-block>
+    <tdesign-demo-block summary="图标加文字悬浮按钮" :padding="true">
+      <t-button v-bind="btnProps" @click="changeType('advance')">图标加文字悬浮按钮</t-button>
     </tdesign-demo-block>
     <BaseDemo v-if="type === 'base'" />
-    <TextDemo v-if="type === 'advanced'" />
+    <AdvanceDemo v-if="type === 'advance'" />
   </div>
 </template>
 
 <script lang="ts" setup>
 import { ref } from 'vue';
-import BaseDemo from './display.vue';
-import TextDemo from './text.vue';
+import BaseDemo from './base.vue';
+import AdvanceDemo from './advance.vue';
 
 const type = ref('base');
 const changeType = (t: string) => (type.value = t);
+const btnProps = {
+  block: true,
+  size: 'large',
+  theme: 'primary',
+  variant: 'outline',
+};
 </script>
 
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+.tdesign-mobile-demo {
+  background-color: #fff;
+  min-height: 100vh;
+  box-sizing: border-box;
+}
+</style>

src/fab/fab.vue

@@ -1,50 +1,50 @@
 <template>
-  <t-button v-bind="customButtonProps" :class="classes" :style="style" @click="onClick">
-    <t-node v-if="iconTNode" :content="iconTNode" />
-    <span v-if="text" :class="`${name}__text`">{{ text }}</span>
+  <t-button
+    size="large"
+    theme="primary"
+    :class="classes"
+    :style="style"
+    v-bind="btnProps"
+    :icon="() => iconTNode"
+    @click="onClick"
+  >
+    {{ text }}
   </t-button>
 </template>
 
 <script lang="ts">
 import { computed, defineComponent, getCurrentInstance } from 'vue';
-import { renderTNode, TNode, useEmitEvent } from '../shared';
+
+import { renderTNode, useEmitEvent } from '../shared';
 import props from './props';
 import config from '../config';
-import TButton, { TdButtonProps } from '../button';
+import TButton from '../button';
 
 const { prefix } = config;
 const name = `${prefix}-fab`;
 
 export default defineComponent({
   name,
-  components: { TNode, TButton },
+  components: { TButton },
   props,
   emits: ['click'],
   setup(props, context) {
+    const internalInstance = getCurrentInstance();
+    const iconTNode = computed(() => renderTNode(internalInstance, 'icon'));
     const emitEvent = useEmitEvent(props, context.emit);
 
     const classes = computed(() => ({
       [`${name}`]: true,
-      [`${name}--icononly`]: props.icon && !props.text,
     }));
+    const btnProps = computed(() => ({ shape: props.text ? 'round' : 'circle', ...props.buttonProps }));
 
     const onClick = (e: MouseEvent) => emitEvent('click', { e });
 
-    const baseButtonProps = {
-      size: 'middle',
-      shape: 'round',
-      theme: 'primary',
-    };
-    const customButtonProps = computed(() => ({ ...(baseButtonProps as TdButtonProps), ...props.buttonProps }));
-
-    const internalInstance = getCurrentInstance();
-    const iconTNode = computed(() => renderTNode(internalInstance, 'icon'));
-
     return {
       name,
       classes,
+      btnProps,
       iconTNode,
-      customButtonProps,
       onClick,
     };
   },

src/fab/style/index.js

@@ -1 +1 @@
-import '../../_common/style/mobile/components/fab/_index.less';
+import '../../_common/style/mobile/components/fab/v2/_index.less';