Easy-ui

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

该框架参考了Element-ui , 所以不能说是很像吧, 但可以说是一模一样 😂(打算有时间把所有的都模仿一遍)。

独狼一个, 如果有大佬看到, 还请指点一下 😭 如果有一起学习的就更好了 😭

框架进度

• 基础组件

  • Icon 图标
  • Button 按钮
  • Link 文字链接

• Navigation

  • NavMenu 导航菜单
  • Tabs 标签页
  • Breadcrumb 面包屑
  • Tabs 标签页
  • PageHeader 页头
  • Dropdown 下拉菜单
  • Steps 步骤条
  • Drawer 抽屉

• 表单组件

  • Radio 单选框
  • Checkbox 多选框
  • Input 输入框
  • Textarea 文本域
  • InputNumber 计数器
  • Switch 开关
  • Rate 评分
  • Select 选择框
  • TimePicker 时间选择器
  • DatePicker 日期选择器
  • Upload 上传
  • Form 表单

• Data

  • Tag 标签
  • Progress 进度条
  • Pagination 分页
  • Badge 标记
  • Avatar 头像
  • Skeleton 骨架屏
  • Empty 空状态
  • Descriptions 描述列表
  • Result 结果
  • Table 表格
  • Tree 树形控件
  • Statistic 统计数字

• Notice

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

• Others

  • Card 卡片
  • Carousel 走马灯
  • TimeLine 时间线
  • Backtop 回到顶部
  • Collapse 折叠面板
  • Calendar 日历
  • Image 图片
  • InfiniteScroll 无限滚动
  • Popconfirm 气泡确认框
  • Dialog 对话框
  • Tooltip 文字提示
  • Popover 弹出框
  • Divider 分割线

未来计划（bug）

• 完成剩余组件（一些是自我水平不够，没信心动手；一部分是没实习和就业过，不知道有什么场景会用，所以暂时不做。）

• 对主流框架进行全方位适配。

• Descriptions 描述列表, span 值设置超过表格总 span 会导致元素消失

• Table 表格, 复杂场景下可能会出现错位。

• NavMenu 导航菜单, 在 vue 框架下不够灵活。可能需要以下代码

  <script setup>
  import { defineComponent, onMounted, ref, watch } from "vue";
  import { RouterLink, useRoute } from "vue-router";
  import "easy-component-ui/components/ea-menu-item/index.js";
  
  const props = defineProps({ to: String });
  const route = useRoute();
  
  defineComponent({
    name: "MyRoute",
  });
  
  const navActive = {
    activeRoute: ref(route.path) || "",
  };
  
  watch(route, (newVal) => {
    navActive.activeRoute.value = newVal.path;
  });
  </script>
  
  <template>
    <ea-menu-item class="rl-item" :actived="navActive.activeRoute.value === to">
      <RouterLink :to="to" activeClass="active">
        <slot></slot>
      </RouterLink>
    </ea-menu-item>
  </template>
  

• Icon 图标, 可以在 main.js 中设置全局配置。无需像文档内在组件引入处设置。

  window.addEventListener("DOMContentLoaded", () => {
    setConfig({
      fontelloCSS: new URL("/ea-icon/css/fontello.css", import.meta.url).href,
    });
  });
  

• Collapse 折叠面板, 组件上默认 active 值为空会导致报错。