### 介绍

`wrap-element-ui` 是一款基于 `element-UI` 二次封装的前端组件库，主要用于快速开发 PC 网站中后台产品

### 使用 npm 安装

```bash
pnpm i wrap-element-ui
```

### 组件使用

可以局部注册所需的组件，适用于与其他框架组合使用的场景

```js
import { DemoComponent } from "@lx-frontend/wrap-element-ui";

export default {
  components: {
    DemoComponent,
  },
};
```

在模板中，用 `<DemoComponent></DemoComponent>` 自定义标签的方式使用组件

```xml
<template>
  <div>
    <DemoComponent>这是一个 demo 组件</DemoComponent>
  </div>
</template>
```

### 开发指南

新增或修改组件时，使用 `pnpm dev` 可以实时预览 stories。

开发完成后，可以使用 `pnpm dist` 预览打包后的组件是否能正常工作。与 `pnpm dev` 的区别在于，该命令修改了组件的引用地址，指向了打包后的组件。该命令不能实时预览修改。

`build:lib`命令用于打包组件库，生成组件代码及类型定义文件。

`build:sb` 用于生成 stories 静态预览文件。

`pnpm preview` 用于预览`build:sb`生成的静态文件。

### 已知问题

1. **Storybook Setup API 无法动态更新 Controls**
   - 使用 Storybook 的 setup API 时，无法动态更新 controls 面板的内容。建议使用 Vue 2 老版本的 Options API 写法。

2. **Options API 中 this 指向问题**
   - 在 Storybook 中使用 Options API 写法时，无法正确获取 `this` 指向。建议尽量避免 hook 的嵌套导致 `this` 丢失问题。虽然可以通过传递 Vue 实例的方式来解决，但请尽量保持 demo 的简单性和可读性。

3. **Storybook 卡死问题**
   - 当 story 内容过多或嵌套层级过深时，可能会导致 Storybook 卡死。这通常是复杂组件的 story 出现逻辑问题时导致的，但 Storybook 无法抛出明确的错误信息。建议检查自己新增的逻辑，逻辑中的错误会导致原本嵌套很深的组件造成 Storybook 页面的卡死。