Hyper 一个 Vue UI组件库

在线文档

点我查看文档

介绍

因为发现很多医保的业务组件，风格和业务逻辑是一样的，此前的做法都是copy到每个项目或者不明真相的人自己又写了一个类似的组件。

而且维护也困难，样式和规范也不统一。本着让大家减少重复造轮子，并且统一UI规范的想法：

如果能集中把这些医保业务组件从每个项目抽离共享出来，发布成一个npm包统一管理下载和版本升级，那后期不管是维护还是功能新增，前端开发工作量就减少了，UI规范方面也很容易达成统一。

欢迎大家一起来开发完善和共享这个业务组件库 O(∩_∩)O，让它更方便后续为我们医保业务前端开发所使用。

开始使用

• CSS 样式

在安装使用本框架的时候，请在 CSS 中设置 box-sizing 为 border-box：

*,*::before,*::after{box-sizing: border-box}

设置相关颜色变量（后续会改为 SCSS 变量）：

/* IE15 及以上浏览器皆支持此样式 */
:root{
    --button-height:32px;
    --font-size:14px;
    --button-bg:white;
    --button-active-bg:#eee;
    --border-radius:4px;
    --color:#333;
    --border-color:#999;
    --border-color-hover:#666;
}

• 安装 ybUI

npm install --save ybj-ui

• 引入 ybUI

import Vue from 'vue';
import App from './App.vue';

//引入ElementUI
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

//全局引入医保UI
import ybUI from 'ybj-ui';
import 'ybj-ui/dist/index.css'

Vue.use(ElementUI);
Vue.use(ybUI);

new Vue({
  el: '#app',
  render: h => h(App)
});

文档

变更记录

联系方式