medical-ui v0.3.60
medical-ui
适用性说明
本组件库没有用 webpack 进行打包, 仅适用于具备相应构建能力的 vue 栈项目, 且需要导入了 ant-design-vue
作为前置依赖。
参照 ant-design-vue 文档,组件可使用 med-
前缀替代 a-
,例如 <med-button />
替代 <a-button />
。
安装
npm i ant-desin-vue // 前置依赖
npm i medical-ui // 本ui库
or
yarn add ant-desin-vue // 前置依赖
yarn add medical-ui // 本ui库
引入 Medical UI
// main.js 导入全部组件
import MedicalUI from "medical-ui";
// 导入全部 css
import "medical-ui/lib/medical-ui.css";
Vue.use(MedicalUI)
--------------- --------------------------
// 组件内按需导入
import { MedButton } from "medical-ui";
// 如需进行样式变量覆盖则请相应 less 文件
import "medical-ui/lib/MedButton/style/index.less";
export default {
...,
components: {
MedButton
},
...,
}
*Tip: 使用 MedTheme 修改主题色时(待优化)
// 添加/配置 vue.config.js
const ThemeColorReplacer = require('webpack-theme-color-replacer') // 引入插件
function getAntdSerials(color) { // 定义方法
var lightens = new Array(9).fill().map((t, i) => {
return ThemeColorReplacer.varyColor.lighten(color, i / 10)
})
var darkens = new Array(6).fill().map((t, i) => {
return ThemeColorReplacer.varyColor.darken(color, i / 10)
})
return lightens.concat(darkens)
}
module.exports = {
...,
configureWebpack: {
...,
plugins: [
new ThemeColorReplacer({
fileName: 'css/theme-colors.css',
matchColors: getAntdSerials('#17509d')
})
],
...,
}
...,
}
组件概览
二次开发组件
- MedSRadio: 单选框(完善中)
- MedSCheckbox: 复选框(完善中)
- MedSForm: 初步实现功能
- MedSCard: 模块卡片
- MedSSticker: 展示卡片
文档地址 (龟速补全中)
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago