mj-basic-ui

安装

内网环境安装

npm install mj-basic-ui --registry http://npm.tngs.com/

外网环境安装

npm install mj-basic-ui

或着

cnpm install mj-basic-ui

使用

引入

在 Vue 项目的 main.js 中引入美吉基础组件库

import Vue from 'vue'
import MjBasicUi from 'mj-basic-ui'
import 'mj-basic-ui/mj-basic-ui.css'
import "mj-basic-ui/style/skin/index.scss"

Vue.use(MjBasicUi)

功能

1. 组件 <mj-custom-table>：全屏、密度、搜索栏显示/隐藏

1.1. 说明

<mj-custom-table>组件内包含 3 个子组件：<mj-screen-full>、<mj-custom-col-size>、<mj-toggle-block>，分别表示：表格全屏显示、表格密度设置、搜索栏显示/隐藏组件，这三个子组件也可以单独使用。

1.2. 属性

<mj-custom-table>内可传属性：visibilityArr，参数属性说明如下：

| 参数 | 说明 | 类型 | 默认值 | | ------------- | -------------- | ---- | ---------------------------------------------- | | visibilityArr | 可显示的子组件 | 数组 | ["ScreenFull", "CustomColSize", "ToggleBlock"] |

"ScreenFull" 表示表格全屏子组件<mj-screen-full>，"CustomColSize" 表示密度子组件<mj-custom-col-size>，"ToggleBlock" 表示显示搜索框显示/隐藏子组件<mj-toggle-block>

<template>
    ...
    <!-- 表格集成组件（全屏、密度、搜索栏显示/隐藏） -->
    <mj-custom-table :visibilityArr="['ScreenFull', 'CustomColSize', 'ToggleBlock']"></mj-custom-table>
  ...
</template>

1.3. 功能

1.3.1. 全屏功能

某个区域需要全屏显示，需要给其额外包裹一个div，并且设置属性ref="screenFullRef"，代码块如下：

<template>
    <div ref="screenFullRef">
        // 需要全屏显示的区域
        ...
    </div>

     <!-- 表格集成组件（全屏） -->
     <mj-custom-table :visibilityArr="['ScreenFull']"></mj-custom-table>
</template>

1.3.2. 密度功能

代码块如下：

<template>
    <!-- 表格集成组件（密度） -->
    <mj-custom-table :visibilityArr="['CustomColSize']"></mj-custom-table>
</template>

1.3.3. 搜索栏显示/隐藏功能

某个区域需要显示/隐藏，需要给其额外包裹一个div，并且设置属性ref="toggleBlockRef"，代码块如下：

<template>
    <!-- 表格集成组件（搜索栏显示/隐藏） -->
    <mj-custom-table :visibilityArr="['ToggleBlock']"></mj-custom-table>
</template>

1.4. 效果

2. 自定义表格组件<mj-custom-column>

组件<mj-custom-column>既可以单独使用，也可以作为插槽插入到组件<mj-custom-table>中使用，代码块如下：

<template>
  <mj-custom-table :visibilityArr="['ScreenFull', 'CustomColSize', 'ToggleBlock']">
    // 自定义表格组件
    <mj-custom-column slot="customColumn">
      <i slot="extra" class="el-icon-setting" title="自定义列"></i>
    </mj-custom-column>
  </mj-custom-table>
</template>

因为组件<mj-custom-column>早期已经开发完毕，并且该组件需要一些额外属性传入，与业务有一定耦合度，为了方便维护，因此降低其与后期开发的组件<mj-custom-table>之间的耦合度，所以直接使用插槽将其插入使用，效果如图所示：

3. 换肤组件<mj-custom-skin>

代码块如下：

<template>
  <mj-custom-skin @setSkinStyle="setSkinStyle">
    <i class="el-icon-setting" slot="extra"></i>
  </mj-custom-skin>
</template>

自定义事件：

| 事件名称 | 说明 | 回调参数 | | ------------ | ------------ | ------------------- | | setSkinStyle | 设置主题风格 | (skinStyle: string) |

setSkinStyle 事件使得我们可以从 组件获取到当前选中的主题风格字段 skinStyle，一般我们将获取到的 skinStyle 存储到 vuex 中，方便我们在 Vue 项目中全局使用，setSkinStyle 事件内会调用后端接口存入数据库（后续会添加调用接口的代码片段），具体示例代码如下：

<template>
  <mj-custom-skin @setSkinStyle="setSkinStyle">
    <i class="el-icon-setting" slot="extra"></i>
  </mj-custom-skin>
</template>

<script>
    export default {
        data(){},
        mounted(){},
        methods: {
            // 在vuex中存入主题风格用来更新不同主题风格的logo(后期在这里调用提交接口)
            setSkinStyle(skinStyle) {
              window.document.documentElement.setAttribute('theme-style', skinStyle)
              this.$store.commit('global/GET_SKIN_STYLE', skinStyle)
            }
        }
    }
</script>

如前面所讲，我们通过 setSkinStyle 事件获取主题风格字段 skinStyle 的值，这样就方便做一些定制化操作，比如根据 skinStyle 是 blue（蓝色主题）、light（亮色主题）还是 default（默认主题）来动态替换系统 logo。

blue（蓝色主题）、light（亮色主题）logo：

default（默认主题）logo：

效果如图所示：