鲁班控制台前端共享组件库

Project setup

npm i luban-fe-ui

依赖

依赖element ui

在引入页面中

import 'console-ui-library/src/assets/style/global.less';
import lubanfeUI from "luban-fe-ui";
import 'luban-fe-ui/lib/luban-fe-ui.css';
Vue.use(lubanfeUI);

可用标签：

可用的标签 Siderbar, 左侧菜单 Echarts, 图表 Ellipsis, 字过多出现... Highlight, 无编辑的代码高亮 CodeMirror, 可编辑的代码高亮 MonacoEditor, 可编辑的代码高亮 Scroll, 左右滚动轮播 StatItem, 统计 CTable, 带筛选标签功能自定义表 CTableTitle, 表的标题 CCTable, 无筛选标签功能自定义表（尽量使用CTable） TimerTag, 时间标签 SelectTag, 选择标签 Verify, 验证码 CDrawer, 抽屉 CTitle, 标题 CCollapse, 折叠面板 CRefreshButton, 刷新按钮 CBreadcrumb, 可带状态的面包宵 CDetail, 详情 Interface, 交换机接口图 CTree 树

组件原则

1、使用公共变量 @import "../../assets/style/variable.less";（组件中和引入项目中都要这样） 2、组件的样式要和UI保持一致，要做到开发者在使用时，基本不需要设置什么，基本功能是以最小设置可用，并可支持参数扩展 3、在写组件时，尽可能的拆成最小化，以做到最小功能的可复用 4、基本的用户体验交互要做；比如按钮一般有常态和hover态 5、尽量沿用现有模式（现有模式有问题，要早提出来），不要一套组件有N多风格；比如交互体验（所有下拉的交互保持一致），色调（按UI来应该不用出现，但如果UI人员换人时可能会有这个问题，一旦发现，要和UI提出来） 6、组件中尽量不要使用唯一标签ID，如; 问题是无法多实例，一个页面不能有相同的id存在 7、样式使用范围限定key：scoped，以防引入公共污染