https://github.com/wu-component/web-component-plus

采用WebComponent方式重写ElementUI, 仓库中包含核心包以及UI组件库,包括底层逻辑npm包以及UI实现
https://github.com/wu-component/web-component-plus

element typescript virtual-dom web webcomponents

Last synced: 5 days ago
JSON representation

采用WebComponent方式重写ElementUI, 仓库中包含核心包以及UI组件库,包括底层逻辑npm包以及UI实现

• Host: GitHub
• URL: https://github.com/wu-component/web-component-plus
• Owner: wu-component
• License: apache-2.0
• Created: 2022-04-17T05:54:31.000Z (over 2 years ago)
• Default Branch: master
• Last Pushed: 2023-12-11T14:56:49.000Z (10 months ago)
• Last Synced: 2024-09-20T03:01:38.955Z (15 days ago)
• Topics: element, typescript, virtual-dom, web, webcomponents
• Language: TypeScript
• Homepage: https://wu-component.github.io/
• Size: 12.3 MB
• Stars: 260
• Watchers: 31
• Forks: 50
• Open Issues: 1
• Metadata Files:
  • Readme: readme.md
  • License: LICENSE

Awesome Lists containing this project

README

        
## web-component-ui

[中文官网](https://wu.canyuegongzi.xyz/)

[英文官网](https://wu-component.github.io/)

web-plus-ui 是一套基于 webComponent 的 UI 组件库，目前尚在开发阶段，其中样式基于 elementUI。

web-core-plus 是核心代码包，其中利用虚拟dom 实现了 WebComponent 的渲染;

### 如何开发 WebComponent 组件

#### 自定义标签

```tsx

import { h, Component, Prop } from "@wu-component/web-core-plus";

import css from './index.scss';

import { UISize } from "@/interface";

import { extractClass } from "@/common";

type WuButtonType = 'primary' | 'success' | 'warning' | 'danger' | 'info'

type NativeType = 'button' | 'submit' | 'reset'

@Component({

    name: 'wu-plus-button',

    css: css

})

export class WuButton extends HTMLElement {

    constructor() {

        super();

    }

    @Prop({ default: 'primary', type: String })

    public type: WuButtonType;

    @Prop({ default: 'mini', type: String })

    public size: UISize;

    @Prop({ default: false, type: Boolean })

    public plain: boolean;

    @Prop({ default: false, type: Boolean })

    public round: boolean;

    @Prop({ default: false, type: Boolean })

    public circle: boolean;

    @Prop({ default: false, type: Boolean })

    public loading: boolean;

    @Prop({ default: false, type: Boolean })

    public disabled: boolean;

    @Prop({ default: '', type: String })

    public icon: string;

    @Prop({ default: 'button', type: String })

    public nativeType: NativeType;

    @Prop({ default: '', type: String })

    public text: string;

    public render(_renderProps= {}, _store = {}) {

        return(

            

                {this.loading && [

                    

                        

                    ,

                    ' ',

                ]}

                {this.text}

                

            

        );

    }

}

```

#### 使用标签

```html



    按钮

    按钮

    按钮



```

### 参与开发

#### 依赖安装

```bin

// 核心包、路由插件依赖安装

pnpm install

// 组件库以来安装

cd ./packages/web-core-ui

pnpm install

```

#### 构建

```

// 核心包构建

cd web-core-plus

pnpm run build:rollup

// 路由插件构建

cd web-core-router

pnpm run build:rollup

// 组件库构建

cd web-core-ui

pnpm run build:ui

```