Repository: Tencent/tdesign-mobile-vue
Pull request #897 (2023-06-25 07:21:42)

refactor(fab): using setup
<!--
首先，感谢你的贡献！😄
请阅读并遵循 [TDesign 贡献指南](https://github.com/Tencent/tdesign/blob/main/docs/contributing.md)，填写以下 pull request 的信息。
PR 在维护者审核通过后会合并，谢谢！
-->

### 🤔 这个 PR 的性质是？

- [ ] 日常 bug 修复
- [ ] 新特性提交
- [ ] 文档改进
- [ ] 演示代码改进
- [ ] 组件样式/交互改进
- [ ] CI/CD 改进
- [x] 重构
- [ ] 代码风格优化
- [ ] 测试用例
- [ ] 分支合并
- [ ] 其他

### 🔗 相关 Issue

<!--
1. 描述相关需求的来源，如相关的 issue 讨论链接。
-->
无

### 💡 需求背景和解决方案

<!--
1. 要解决的具体问题。
2. 列出最终的 API 实现和用法。
3. 涉及UI/交互变动需要有截图或 GIF。
-->
使用 setup script 重构

### 📝 更新日志

<!--
从用户角度描述具体变化，以及可能的 breaking change 和其他风险。
-->

- fix(Fab): 改用 setup 语法糖

- [x] 本条 PR 不需要纳入 Changelog

### ☑️ 请求合并前的自查清单

⚠️ 请自检并全部**勾选全部选项**。⚠️

- [x] 文档已补充或无须补充
- [x] 代码演示已提供或无须提供
- [x] TypeScript 定义已补充或无须补充
- [x] Changelog 已提供或无须提供


github-actions[bot]: <a href="https://preview-pr897-tdesign-mobile-vue.surge.sh"><img height="96" alt="完成" src="https://user-images.githubusercontent.com/15634204/150816437-9f5bb788-cd67-4cbc-9897-b82d74e9aa65.png" /></a>
<!-- [工作流地址](https://github.com/Tencent/tdesign-mobile-vue/actions/runs/5368577659) -->
<!-- AUTO_PREVIEW_HOOK -->
github-actions[bot]: **Size Change:** -44 B (0%) 

**Total Size:** 473 kB

| Filename | Size | Change |
| :--- | :---: | :---: |
| `./dist/tdesign.js` | 276 kB | -51 B (0%) |
| `./dist/tdesign.min.js` | 133 kB | +7 B (0%) |

<details><summary>ℹ️ <strong>View Unchanged</strong></summary>

| Filename | Size |
| :--- | :---: |
| `./dist/reset.css` | 672 B |
| `./dist/tdesign.css` | 36.4 kB |
| `./dist/tdesign.min.css` | 26.3 kB |

</details>



Patch:
diff --git a/src/_common b/src/_common
index e742362d..00688b90 160000
--- a/src/_common
+++ b/src/_common
@@ -1,1 +1,1 @@
-Subproject commit e742362d9d713711617c24487f1b0b2f262868cb
+Subproject commit 00688b90a423cefc41237351456586189d3c3969
diff --git a/src/fab/fab.vue b/src/fab/fab.vue
index 4a095017..cb69a439 100644
--- a/src/fab/fab.vue
+++ b/src/fab/fab.vue
@@ -1,46 +1,45 @@
 <template>
   <div :class="classes" :style="style" @click="onClick">
-    <t-button size="large" theme="primary" :class="[`${name}__button`]" v-bind="btnProps" :icon="() => iconTNode">
+    <t-button
+      size="large"
+      theme="primary"
+      :shape="props.text ? 'round' : 'circle'"
+      :class="[`${name}__button`]"
+      v-bind="buttonProps"
+      :icon="() => iconTNode"
+    >
       {{ text }}
     </t-button>
   </div>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, getCurrentInstance } from 'vue';
+import { computed, defineProps, defineEmits, getCurrentInstance } from 'vue';
 
 import { renderTNode, useEmitEvent } from '../shared';
-import props from './props';
+import fabProps from './props';
 import config from '../config';
-import TButton, { ButtonProps } from '../button';
+import TButton from '../button';
 
 const { prefix } = config;
 const name = `${prefix}-fab`;
 
-export default defineComponent({
+export default {
   name,
-  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,
-    }));
-    const btnProps = computed<ButtonProps>(() => ({ shape: props.text ? 'round' : 'circle', ...props.buttonProps }));
-
-    const onClick = (e: MouseEvent) => emitEvent('click', { e });
-
-    return {
-      name,
-      classes,
-      btnProps,
-      iconTNode,
-      onClick,
-    };
-  },
-});
+};
+</script>
+
+<script lang="ts" setup>
+const props = defineProps(fabProps);
+const emit = defineEmits(['click']);
+
+const internalInstance = getCurrentInstance();
+const iconTNode = computed(() => renderTNode(internalInstance, 'icon'));
+const emitEvent = useEmitEvent(props, emit);
+
+const classes = computed(() => ({
+  [`${name}`]: true,
+}));
+
+const onClick = (e: MouseEvent) => emitEvent('click', { e });
 </script>
diff --git a/src/pull-down-refresh/pull-down-refresh.vue b/src/pull-down-refresh/pull-down-refresh.vue
index 521ec572..daa5cbbf 100644
--- a/src/pull-down-refresh/pull-down-refresh.vue
+++ b/src/pull-down-refresh/pull-down-refresh.vue
@@ -27,7 +27,7 @@ import debounce from 'lodash/debounce';
 import isArray from 'lodash/isArray';
 
 import PullDownRefreshProps from './props';
-import { useEmitEvent, useVModel, convertUnit } from '../shared';
+import { useEmitEvent, useVModel, convertUnit, reconvertUnit } from '../shared';
 import config from '../config';
 import TLoading from '../loading';
 import { useTouch, isReachTop, easeDistance } from './useTouch';
@@ -64,6 +64,7 @@ export default defineComponent({
     const maxBar = ref(null);
     const { height: loadingBarHeight } = useElementSize(loadingBar);
     const { height: maxBarHeight } = useElementSize(maxBar);
+    const actualLoadingBarHeight = ref(0);
 
     watch(
       [loading, loadingBarHeight],
@@ -118,6 +119,7 @@ export default defineComponent({
       if (!isReachTop(e) || loading.value) return;
 
       const { deltaY } = touch;
+      actualLoadingBarHeight.value = deltaY.value;
       const nextDistance = easeDistance(deltaY.value, loadingBarHeight.value);
       // 下拉时，防止下拉整个页面
       if (deltaY.value > 0) {
@@ -174,9 +176,14 @@ export default defineComponent({
         transform: `translate3d(0, ${distance.value}px, 0)`,
       };
     });
-    const loadingBarStyles = computed(() => ({
-      height: convertUnit(props.loadingBarHeight),
-    }));
+    const heightDiff = (reconvertUnit(props.maxBarHeight) - reconvertUnit(props.loadingBarHeight)) / 2;
+    const loadingBarStyles = computed(() => {
+      return {
+        transform: `translateY(${heightDiff}px)`,
+        height: `${actualLoadingBarHeight.value}px`,
+        maxHeight: convertUnit(props.loadingBarHeight),
+      };
+    });
     const maxBarStyles = computed(() => ({
       height: convertUnit(props.maxBarHeight),
     }));
diff --git a/src/shared/util.ts b/src/shared/util.ts
index 2920fb28..19b24dee 100644
--- a/src/shared/util.ts
+++ b/src/shared/util.ts
@@ -62,3 +62,8 @@ export const convertUnit = (val: string | number | undefined) => {
   if (val == null) return 0;
   return isNumber(val) ? `${val}px` : val;
 };
+
+export const reconvertUnit = (val: string | number | undefined) => {
+  if (val == null) return 0;
+  return isNumber(val) ? Number(val) : Number(val.slice(0, -2));
+};


Test patch:
diff --git a/src/list/__test__/__snapshots__/demo.test.jsx.snap b/src/list/__test__/__snapshots__/demo.test.jsx.snap
index c3f6ab99..4da8265a 100644
--- a/src/list/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/list/__test__/__snapshots__/demo.test.jsx.snap
@@ -146,7 +146,7 @@ exports[`List > List pullRefreshVue demo works fine 1`] = `
     >
       <div
         class="t-pull-down-refresh__loading"
-        style="height: 50px;"
+        style="transform: translateY(15px); height: 0px; max-height: 50px;"
       >
         <div
           class="t-pull-down-refresh__text"
diff --git a/src/pull-down-refresh/__test__/__snapshots__/demo.test.jsx.snap b/src/pull-down-refresh/__test__/__snapshots__/demo.test.jsx.snap
index 2e58f63d..83122011 100644
--- a/src/pull-down-refresh/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/pull-down-refresh/__test__/__snapshots__/demo.test.jsx.snap
@@ -15,7 +15,7 @@ exports[`PullDownRefresh > PullDownRefresh baseVue demo works fine 1`] = `
     >
       <div
         class="t-pull-down-refresh__loading"
-        style="height: 66px;"
+        style="transform: translateY(7px); height: 0px; max-height: 66px;"
       >
         <div
           class="t-pull-down-refresh__text"
@@ -312,7 +312,7 @@ exports[`PullDownRefresh > PullDownRefresh loadingTextsVue demo works fine 1`] =
           >
             <div
               class="t-pull-down-refresh__loading"
-              style="height: 70px;"
+              style="transform: translateY(15px); height: 0px; max-height: 70px;"
             >
               <div
                 class="t-pull-down-refresh__text"
@@ -346,7 +346,7 @@ exports[`PullDownRefresh > PullDownRefresh mobileVue demo works fine 1`] = `
       >
         <div
           class="t-pull-down-refresh__loading"
-          style="height: 66px;"
+          style="transform: translateY(7px); height: 0px; max-height: 66px;"
         >
           <div
             class="t-pull-down-refresh__text"
@@ -644,7 +644,7 @@ exports[`PullDownRefresh > PullDownRefresh timeoutVue demo works fine 1`] = `
           >
             <div
               class="t-pull-down-refresh__loading"
-              style="height: 50px;"
+              style="transform: translateY(15px); height: 0px; max-height: 50px;"
             >
               <div
                 class="t-pull-down-refresh__text"
diff --git a/src/pull-down-refresh/__test__/__snapshots__/index.test.jsx.snap b/src/pull-down-refresh/__test__/__snapshots__/index.test.jsx.snap
index 8fff20cb..5f97f8b7 100644
--- a/src/pull-down-refresh/__test__/__snapshots__/index.test.jsx.snap
+++ b/src/pull-down-refresh/__test__/__snapshots__/index.test.jsx.snap
@@ -14,7 +14,7 @@ exports[`PullDownRefresh > :props > :others 1`] = `
     >
       <div
         class="t-pull-down-refresh__loading"
-        style="height: 50px;"
+        style="transform: translateY(15px); height: 0px; max-height: 50px;"
       >
         <div
           class="t-pull-down-refresh__text"
diff --git a/src/pull-down-refresh/__test__/index.test.jsx b/src/pull-down-refresh/__test__/index.test.jsx
index 905f1f91..4f4b4ab4 100644
--- a/src/pull-down-refresh/__test__/index.test.jsx
+++ b/src/pull-down-refresh/__test__/index.test.jsx
@@ -13,10 +13,10 @@ describe('PullDownRefresh', () => {
     it(':loadingBarHeight', async () => {
       const wrapper = mount(<PullDownRefresh value={true} loadingBarHeight={30} />);
       const loadingBar = wrapper.find('.t-pull-down-refresh__loading');
-      expect(window.getComputedStyle(loadingBar.element).height).toBe(`${30}px`);
+      expect(window.getComputedStyle(loadingBar.element).getPropertyValue('max-height')).toBe(`${30}px`);
 
       await wrapper.setProps({ loadingBarHeight: '90px' });
-      expect(window.getComputedStyle(loadingBar.element).height).toBe(`${90}px`);
+      expect(window.getComputedStyle(loadingBar.element).getPropertyValue('max-height')).toBe(`${90}px`);
     });
 
     it(':others', async () => {