tdesign-sfc v0.0.3

TDesign

基于 SFCJS 的 TDesign 版本，帮助你在你的项目中立即使用 tdesign.

快速使用

<!-- 引入库文件 -->
<script src="https://unpkg.com/tdesign-sfc"></script>

<!-- 使用 tdesign 的按钮 -->
<t-button>确定</t-button>

引入库文件

你有多种方法使用tdesign-sfc的库文件。

第一种：引入完整构建包。

<script src="https://unpkg.com/tdesign-sfc"></script>

这种最直接最暴力，把所有组件一次性全部引入。优点是简单快捷，缺点是包比较大，加载较慢。

第二种：依赖+构建包。

<script src="https://unpkg.com/sfcjs"></script>
<script src="https://unpkg.com/tdesign-sfc/dist"></script>

这种把依赖sfcjs给独立出来，假如你项目种有其他用到sfcjs的地方，可以用这种。可以稍微加快加载速度，但是仍然是一次性把所有组件都引入了。

第三种：按需引入。

<script src="https://unpkg.com/sfcjs"></script>
<script src="https://unpkg.com/tdesign-sfc/dist/t-button"></script>

这种你需要先独立引入sfcjs依赖，然后再引入某个你需要的组件文件。这种是最推荐的，不过需要考虑的是，如果需要加载很多组件，也会由于加载限制导致加载慢。

第四种：异步加载。

<script src="https://unpkg.com/sfcjs"></script>
<script src="https://unpkg.com/tdesign-sfc/dist/async.js"></script>
<script>
  const { define } = window['tdesign-sfc']
  define({
    button: 'https://unpkg.com/packages/t-button/index.htm',
    icon: 'https://unpkg.com/packages/t-icon/index.htm',
  })
</script>

这种方式充分利用了sfcjs的特性，实现异步加载和在线编译。这种既平衡了首次加载，又可以按需引入自己需要的组件。

组件

t-button

<t-button>按钮</t-button>

支持如下属性：

可通过 Demo 查看所有按钮效果。

支持如下事件：

t-icon

<t-icon name="search"></t-icon>

支持如下属性：

可通过查看 Demo 页面获得全部图标名。