@hb-ui/element-ui
TypeScript icon, indicating that this package has built-in type declarations

2.2.2 • Public • Published

@hb-ui/element-ui

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

工程

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

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

开发

即 Vite 应用相同的开发方式

npm run dev

构建

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

npm run build

组件

Form

  • 基于 element-ui/form
  • 配置化
  • 搜索缓存
// 你可以根据 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 类型提示使用
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} />
  },
}

设计原则

Readme

Keywords

none

Package Sidebar

Install

npm i @hb-ui/element-ui

Weekly Downloads

52

Version

2.2.2

License

none

Unpacked Size

205 kB

Total Files

21

Last publish

Collaborators

  • xianyujun
  • younglei
  • meetxiaowei
  • caoxie