bxm-ui2

基于vue2，elementui构造的UI组件库

安装

$ npm i bxm-ui2

引入

你可以引入整个 Element，或是根据需要仅引入部分组件。我们先介绍如何引入完整的 Element。

完整引入

在main.js中写入以下内容：

import Vue from 'vue'
import App from './App.vue'
import BxmUI2 from 'bxm-ui2'
import 'bxm-ui2/dist/bxm-ui2.css'

Vue.config.productionTip = false

Vue.use(BxmUI2)

new Vue({
  render: h => h(App),
}).$mount('#app')

以上代码便完成了 BxmUI2 的引入。需要注意的是，样式文件需要单独引入。

按需引入

若你只希望引入部分组件，比如 Button，那么需要在 main.js 中写入以下内容：

import Vue from 'vue'
import App from './App.vue'
import ElementUI from 'element-ui'
import { BxmButton } from 'bxm-ui2'
import 'bxm-ui2/dist/bxm-ui2.css'

Vue.config.productionTip = false

Vue.use(ElementUI)
Vue.use(BxmButton)

new Vue({
  render: h => h(App),
}).$mount('#app')

需要注意的是，按需引入时需要先安装elementui组件库，同时在main.js中引入。

目前支持的组件

组件 | 组件名 ---|--- 按钮 | bxm-button 按钮组 | bxm-button-group 下拉选 | bxm-dropdown 异常信息框 | bxm-warning-box 可调节的布局 | bxm-resize-layout 卡片 | bxm-card 单选 | bxm-radio、bxm-radio-group 版本对比 | bxm-compare Cron表达式生成器 | bxm-crontab 可设置前、后缀的计数器 | bxm-input-number 更新中...

文档

在线文档

更新日志

v1.0.17

• 图标库扩充

v1.0.16

• 修复bxm-datetime-picker组件部分样式不起作用问题

v1.0.15

• bxm-card组件新增size属性，目前支持两种尺寸的卡片

v1.0.13

• 新增bxm-tag组件
• 修改el-input等样式覆盖问题

v1.0.12

• 新增bxm-card组件
• bxm-compare组件的左右对比图标修改默认值，config属性变更为必填项
• 新增bxm-icon-addleft、bxm-icon-addright图标

v1.0.11

• 新增bxm-compare、bxm-crontab、bxm-radio、bxm-radio-group、bxm-input-number组件

v1.0.10

• 修改bxm-resize-layout组件调节线被拖拽时以及拖拽完成后的颜色
• 修改bxm-resize-layout组件leftWidth默认值为20%

v1.0.9

• 修复同一个页面出现多次bxm-resize-layout组件时，只有一个可以正常使用的问题

v1.0.8

• 新增bxm-resize-layout布局组件