sxmaps-ui
v0.9.7
Published
升学前端ui库,基于antd-vue/element二次开发,实现了符合升学的统一的交互语言和视觉风格,并结合业务新增了一些通用组件。
Downloads
13
Readme
简介
升学Ui库,基于antd/element,实现了符合升学的统一的交互语言和视觉风格,并结合业务新增了一些通用组件。
特性
- 基于[email protected]/[email protected]实现。
- 兼容antd/element组件,无侵入性。
- 通过配置覆盖/样式覆盖/自定义组件实现UI的统一管理。
支持环境
安装
使用 npm 或 yarn 安装 (推荐)**
$ npm install sxmaps-ui --save
$ yarn add sxmaps-ui
配置覆盖
// antd项目:vue.config.js文件中增加配置
const theme = require('sxmaps-ui/antd/theme')
css: {
sourceMap: true,
loaderOptions: {
less: {
javascriptEnabled: true,
modifyVars: theme
}
}
}
// element项目:main.js中增加theme引入
import 'sxmaps-ui/element/theme/index.css'
样式覆盖
// antd项目
import 'sxmaps-ui/lib/cover.antd.css' // 全量覆盖
import 'sxmaps-ui/antd/button/a-button.less' // 按需覆盖
// element项目
import 'sxmaps-ui/lib/cover.element.css' // 全量覆盖
import 'sxmaps-ui/element/button/e-button.less' // 按需覆盖
自定义组件
// antd项目
import SUI from 'sxmaps-ui/lib/sxmaps-ui-antd.common'
Vue.use(SUI) // 全量引用
import Button from 'sxmaps-ui/antd/button'
Vue.use(Button) // 按需引用
// element项目
import SUI from 'sxmaps-ui/lib/sxmaps-ui-element.common'
Vue.use(SUI) // 全量引用
import Button from 'sxmaps-ui/element/button'
Vue.use(Button) // 按需引用