Medical-UI @Vue.js

medical-ui 是基于Ant-Design-Vue二次开发的VUE UI组件库。

支持环境

IE	Edge	Firefox	Chrome	Safari
>=11	>= 14	>= 45	>=49	>=10

适用性说明

本组件库没有用 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

引入 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('#0056a4')
        })
      ],
      ...,
    }
    ...,
  }

// 代码中引入即可
<template>
  <med-theme />
</template>