利用 WebComponent 写了一个原生组件库(目前组件不多), 跟一波风~

114 阅读2分钟

Easy-ui

logo.png

Easy-ui 是一个轻量级的 UI 框架,基于 Web Components 构建。文档地址

如果是看源码, 请移步到这里

1. 前言

前几个月看到很多大佬在介绍 WebComponent. 我毕竟还是小白, 看到新奇的就会想试试😂. 于是就有了这个组件库. 主要是之前没有规模性的封装过原生的组件, 手很痒

如果有人不幸看到, 还请指点一二~🤞🤞

2. 简介

该框架参考了Element-ui , 所以不能说是很像吧, 可以说是除了技术栈和核心代码, 其他的一模一样 😂(打算有时间把所有的都模仿一遍)。

因为 浏览器厂家逐步适配 + edge转用WebComponent来开发界面. 相对而言, 至少在部分场景下, 还是可以用来开发. 特别是用来应付学业, 只要在我电脑跑得起来就是好代码😋

WebComponent的好处就是一次编写, 到处运行在现在的主流框架中也可以使用. 不过同样的, 这样做也会影响框架原本的性能.

3. 组件概述

因为没有实习和工作经历, 一些组件没想到有什么场景会用到, 另一些是不知道什么功能比较需要, 所以总体功能不算很丰富.

  • 基础组件

    • Container 布局容器
      • Container 外层容器
      • Header 顶栏容器
      • Main 主体容器
      • Footer 底栏容器
      • Aside 侧边栏容器
    • Icon 图标
    • Button 按钮
      • ButtonGroup 按钮组
    • Link 文字链接
  • 表单组件

    • Radio 单选框
      • RadioGroup 单选框组
    • Checkbox 多选框
      • CheckboxGroup 多选框组
    • Input 输入框
    • Select 选择器
      • Option
      • OptionGroup
    • Textarea 文本域
    • InputNumber 计数器
    • Switch 开关
    • Rate 评分
    • TimePicker 时间选择器
    • DatePicker 日期选择器
    • Form 表单
      • FormItem
  • Data

    • Tag 标签
    • Progress 进度条
    • Pagination 分页
    • Badge 标记
    • Avatar 头像
    • Skeleton 骨架屏
      • SkeletonItem
    • Empty 空状态
    • Descriptions 描述列表
      • DescriptionsItem
    • Result 结果
    • Table 表格
  • Notice

    • Alert 警告
    • Loading 加载
    • Message 消息提示
    • MessageBox 弹框
  • Others

    • Card 卡片
    • Carousel 走马灯
      • CarouselItem
    • TimeLine 时间线
    • Backtop 回到顶部
    • Collapse 折叠面板
      • CollapseItem
    • Calendar 日历
    • Image 图片
    • InfiniteScroll 无限滚动
      • InfiniteScrollItem
  • Navigation

    • NavMenu 导航菜单
      • NavMenuItem
      • NavMenuItemGroup
      • NavSubMenu
    • Tabs 标签页
      • Pane
      • Tab
    • Breadcrumb 面包屑
      • BreadcrumbItem
    • PageHeader 页头
    • Steps 步骤条
      • StepItem
    • Drawer 抽屉

4. 之前没发过文章, 不知道怎么写, 乐, 凑合看吧.