cc-element-components

该项目是基于`element-plus`二次封装组件，使用的技术栈为`vue3` + `typescript` + `element-plus`。在此项目当中，我们会基于`element-plus`的组件库已有组件封装如下组件: - 图标选择器 - 时间选择器 - 城市选择器 - 省市区选择器 - 通知菜单 - 趋势标记 - 评论 - 数据列表 - 数值统计 - 倒计时 - 分割面板 - 时间轴 - 弹框拓展 - 进度条拓展 - 导航菜单拓展 - 可配置项表格 - 可配置项表单 - 日历

Usage no npm install needed!

<script type="module">
  import ccElementComponents from 'https://cdn.skypack.dev/cc-element-components';
</script>

README

项目介绍

该项目是基于element-plus二次封装组件，使用的技术栈为vue3 + typescript + element-plus。在此项目当中，我们会基于element-plus的组件库已有组件封装如下组件:

  • 图标选择器
  • 时间选择器
  • 城市选择器
  • 省市区选择器
  • 通知菜单
  • 趋势标记
  • 评论
  • 数据列表
  • 数值统计
  • 倒计时
  • 分割面板
  • 时间轴
  • 弹框拓展
  • 进度条拓展
  • 导航菜单拓展
  • 可配置项表格
  • 可配置项表单
  • 日历

组件涵盖了大部分通用业务场景，特别是后台系统中用的最多也是最复杂的表单和表格，我们都会以一种全新的方式来封装。

特别说明

因为该组件库是基于element-plus二次封装，所有使用该组件库前，必须确保项目安装并正确引入了element-plus和@element-plus/icons，否则该组件库则无法使用。
所有的图标都已注册成全局组件，以el-icon开头，然后所有大写字母转为小写拼接即可。
element-plus安装使用指南

使用组件

  1. 项目安装依赖: npm i -S cc-element-components
  2. 在 main.ts里写入以下代码:
  import ccElementComponents from 'cc-element-components'
  import  from 'cc-element-components/index.css'

  app.use(ccElementComponents)
  1. 使用组件:
  <cc-choose-icon></cc-choose-icon>
  <cc-choose-area></cc-choose-area>

  // ...

演示地址