Skip to content

[t-fab] API style传字符串被vue报类型错误 #1849

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
WindyHard opened this issue May 22, 2025 · 2 comments · Fixed by #1865 or TDesignOteam/tdesign-api#642
Closed

[t-fab] API style传字符串被vue报类型错误 #1849

WindyHard opened this issue May 22, 2025 · 2 comments · Fixed by #1865 or TDesignOteam/tdesign-api#642
Labels
bug Something isn't working

Comments

@WindyHard
Copy link

tdesign-mobile-vue 版本

1.8.5

重现链接

https://github.com/WindyHard/t-fab-typeEorr

重现步骤

[Vue warn]: Invalid prop: type check failed for prop "style". Expected String with value "[object Object]", got Object
t-fab位置异常,刷新网页后t-fab能正常显示

期望结果

No response

实际结果

No response

框架版本

vue(3.5.12)

浏览器版本

Chrome(135.0.7049.52)

系统版本

Ubuntu(24.04)

Node版本

20.11

补充说明

No response

Copy link
Contributor

👋 @WindyHard,感谢给 TDesign 提出了 issue。
请根据 issue 模版确保背景信息的完善,我们将调查并尽快回复你。

@betavs betavs added the bug Something isn't working label May 22, 2025
@betavs
Copy link
Collaborator

betavs commented May 22, 2025

Vue 默认会将组件上的 style 属性解析为 CSS 对象

<template>
  <t-fab :icon="iconFunc" draggable="all" :style="'right: 100px; bottom: 40px'" :y-bounds="yBounds" @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 onClick = () => {
  console.log('click Fab');
};
const yBounds = [30, 20];
</script>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
2 participants