@tdesign/uniapp 常见问题1. 开始罗列下 @tdesign/uniapp 中的常见问题，持续更新。 2

1. 开始

罗列下 @tdesign/uniapp 中的常见问题，持续更新。

2. FAQ

2.1. setup 语法糖下函数式调用 Toast 等组件时如何传递 `context`

最简单的方式是在页面下预埋，这时根本不需要传递 context。

<!-- 页面级别组件: xx.vue -->
<template>
 <div>
    ...
    <t-toast />
  </div>
</template>

第二种方式如下。

<script lang="ts" setup>
import TToast from '@tdesign/uniapp/toast/toast.vue';

Toast({
  context: {
    $refs: {
      't-toast': TToast.value,
    },
    // ...
  }
})
</script>

2.2. Icon 太大怎么办

可以参考这篇文章，使用这个插件进行解决。

2.3. HBuilderX 中运行到内置浏览器时报错 `Unexpected token .`

报错如下：

这是 HBuilderX 自己的问题，参考这里。

可以运行到 Chrome 中，或者使用 CLI 模式。

2.4. Vue2 下的适配

参考这篇文章。

2.5. 报错 Failed to load font

微信开发者工具报错

[渲染层网络层错误] Failed to load font https://tdesign.gtimg.com/icon/0.4.1/fonts/t.woff
net::ERR_CACHE_MISS
(env: macOS,mp,2.01.2510270; lib: 3.14.2)

原因：微信开发者工具的 bug，忽略即可。

参考：wx.loadFontFace 文档

2.6. Input 组件内容抖动

小程序下，在 Popup 或 Dialog 等组件中，Input 组件中内容可能会抖动。

原因：本质是小程序自己的问题，可以设置组件的 transition:none; 禁用动画，或者在 Popup/Dialog 组件中，延迟显示 Input 组件。

参考：

2.7. 插槽类型报错

报错如下：

Property 'description' does not exist on type '{}'.

原因：tsconfig.json 中 compilerOptions.moduleResolution 配置了 node 等字段，未识别到 @tdesign/uniapp 中的 exports。

解决办法：修改 tsconfig.json 中 compilerOptions.moduleResolution 为 bundler。可参考 tdesign-uniapp-starter。

@tdesign/uniapp 常见问题