# @hb-ui/element-ui

> 基于 Element UI 二次封装的一些常用组件

Latest version **2.2.2** (published 2022-09-28) · 0 weekly downloads

## Install

```sh
npm install @hb-ui/element-ui
pnpm add @hb-ui/element-ui
yarn add @hb-ui/element-ui
bun add @hb-ui/element-ui
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.2.2 |
| Published | 2022-09-28 |
| First published | 2022-08-01 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 199.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 4 |
| Maintainers | younglei, meetxiaowei, caoxie |

## Links

- npm: https://www.npmjs.com/package/@hb-ui/element-ui
- Repository: https://github.com/hello-fe/hb-ui
- Homepage: https://github.com/hello-fe/hb-ui#readme
- Issues: https://github.com/hello-fe/hb-ui/issues
- npm.io page: https://npm.io/package/@hb-ui/element-ui

## Recent versions

- 2.2.2 (latest) — 2022-09-28
- 2.2.1 — 2022-09-16
- 2.2.0 — 2022-08-25
- 2.1.9 — 2022-08-23
- 2.1.8 — 2022-08-23
- 2.1.7 — 2022-08-21
- 2.1.6 — 2022-08-18
- 2.1.5 — 2022-08-18
- 2.1.4 — 2022-08-18
- 2.1.3 — 2022-08-18
- 2.1.2 — 2022-08-17
- 2.1.1 — 2022-08-16
- 2.1.0 — 2022-08-16
- 2.0.1 — 2022-08-04
- 0.0.0 — 2022-08-04
- … 1 more at https://npm.io/package/@hb-ui/element-ui/versions

## README

# @hb-ui/element-ui

基于 Element UI 二次封装的一些常用组件

## 工程

第一感官像是一个普通的 Vite 应用，事实确实如此 -- 鲁迅

```tree
├─┬ components      组件源码目录
│ ├── form
│ └── table
│
├─┬ es              组件输出目录
│ ├── form
│ └── table
│
├── scripts         组件构建脚本
├── server          mock server
│
├─┬ view            开发组件实时预览
│ ├── form          form 使用案例
│ └── table         table 使用案例
│
└── vite.config.js
```

## 开发

即 Vite 应用相同的开发方式

```sh
npm run dev
```

## 构建

构建脚本会将 `components/*` 构建到 `es/*`

```sh
npm run build
```

## 组件

- 🤖 推荐将项目 clone 到本地，然后执行 `npm run dev` 看实际效果
- 🐢 [在线运行 - StackBlitz](https://stackblitz.com/edit/hb-ui-element-ui)

#### Form

- 基于 element-ui/form
- 配置化
- 搜索缓存

```ts
// 你可以根据 TS 类型提示使用
import { Form, FormProps } from '@hb-ui/element-ui'

export default {
  render() {
    /**
     * 如果你用的是 .jsx
     * @type {import('@hb-ui/element-ui').FormProps}
     */
    const formProps: FormProps = {
      // 组件属性、element-ui 属性
      items: [
        {
          label: '名称',
          name: 'name',
        },
      ],
      // element-ui 事件
      on: {
        validate(prop) { },
      },
    }
  
    return <Form $porps={formProps} />
  },
}
```

#### Table

- 基于 element-ui/table
- 配置化
- 可编辑
- 接管请求
- 接管分页

```ts
// 你可以根据 TS 类型提示使用
import { Table, TableProps } from '@hb-ui/element-ui'

export default {
  render() {
    /**
     * 如果你用的是 .jsx
     * @type {import('@hb-ui/element-ui').TableProps}
     */
    const tableProps: TableProps = {
      // 组件属性、element-ui 属性
      columns: [
        {
          label: '名称',
          prop: 'name',
        },
      ],
      // element-ui 事件
      on: {
        'selection-change'(rows) { },
      },
    }
  
    return <Table $props={tableProps} />
  },
}
```

---

## 设计原则

- 组件强烈推荐使用 tsx、jsx。不妨先看看这篇文章 👉 [在Vue中使用JSX的正确姿势](https://zhuanlan.zhihu.com/p/37920151)
- jsx 属性最终兼容 `import('vue').VNodeData`

---
_Source: https://npm.io/package/@hb-ui/element-ui · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._