Meiko

前端通用组件与工具库，该框架基于iView、Vue、TypeScript、Less等。致力于更轻松的构建前端项目。

Demo 示例

克隆 Meiko 源代码，切换到example分支，并执行以下命令：

npm install # 安装依赖 
npm run serve

在浏览器中输入http://127.0.0.1:1841即可，在此页面可预览整体示例以及组件示例。

框架安装

使用vue脚手架构建项目，激活如下选项：

• TypeScript
• Class-style Component
• Less
• TSLint

安装 Meiko 框架：

cd your-project
npm i meiko
npm i iview

编辑main.ts，引入框架：

import Vue from 'vue';
import App from './App.vue';
import router from './router';
// 导入 Meiko
import 'meiko';
import 'meiko/src/styles/index.less';
 
Vue.config.productionTip = false;
 
new Vue({
  router,
  render: (h) => h(App),
}).$mount('#app');

根目录添加vue.config.js，并编辑：

module.exports = {
  css: {
    loaderOptions: {
      less: {
        javascriptEnabled: true,
      },
    },
  },
};

组件使用说明

meiko框架基于iView，具体组件使用说明请参考官方网站，以下是meiko自集成组件。

MViewport

该组件为基础视图组件，为前端项目的基础组件。可参考示例代码中的App.vue。

props:

属性	说明	类型	默认值
logo	项目 Logo	String	默认 Logo
name	项目名称	String	-
modules	项目模块，可代表系统模块分类或菜单分类，如果 只有一个模块，则不显示此模块。该功能的初衷是 为了支持体量可大可小的项目	ViewportModule[]	[]
docUrl	项目说明文档	String	-
user	用户信息	ViewportUser	默认示例用户
lock	蒙层	Boolean	false
userItems	用户下拉菜单	ViewportUserDropItem[]	[]

slots:

名称	说明
tool	工具栏组件，支持 MIconButton、Input、Select

events:

事件名	说明	返回值
on-module-change	点击模块按钮时触发	name
on-logout	点击注销选项时触发	-
on-item-click	点击用户菜单选项时触发	name

MIconButton

该组件为图标按钮组件，只能应用于MViewport的顶栏中，用于实现功能性按钮，其中icon属性请参考iView说明手册。

props:

属性	说明	类型	默认值
icon	图标	String	-
tooltip	提示文字	String	-

events:

事件名	说明	返回值
on-click	按钮点击时触发	-

MIcon

该组件为图标按钮组件，用于实现功能性按钮，其中icon属性请参考iView说明手册。

props:

属性	说明	类型	默认值
icon	图标	String	-
tooltip	提示文字	String	-
size	图标的大小，单位是 px	Number	18
color	图标的颜色	String	-

events:

事件名	说明	返回值
on-click	点击时触发	-

MForm

该组件为表单组件，便于更简单的编写与布局多输入项的页面。

props:

属性	说明	类型	默认值
label-width	标签宽度	Number	80
field-width	输入项宽度	Number	200
confirm-text	确认按钮文字	String	确认
columns	输入项列数	Number	1
border	显示边框	Boolean	false
fields	表单项	FormField[]	[]
values	表单数据，支持 sync	FormValues	{}

events:

事件名	说明	返回值
on-confirm	点击确认按钮时触发	各字段值

MTable

该组件为表格组件，包含表格以及分页功能。可参考示例代码中的Table.vue

props:

属性	说明	类型	默认值
height	表格高度，单位 px，设置后，如果表格内容大于此值，会固定表头	Number	-
max-height	表格最大高度，单位 px，设置后，如果表格内容大于此值，会固定表头	Number	-
columns	表格列的配置描述，详见 iView 官方文档	TableColumn[]	[]
data	表格数据，详见 iView 官方文档	TableData[]	[]
show-header	是否显示表头	Boolean	true
draggable	是否启用拖拽	Boolean	false
show-page	是否显示分页	Boolean	false
page-total	分页数据总数	Number	0
page-current	分页当前页码	Number	1
page-size	分页每页条数	Number	10
show-search	显示查询	Boolean	false
search-columns	查询组件输入项列数	Number	3
search-fields	查询组件输入项	FormField[]	[]

slots:

名称	说明	绑定值
列定义 slot	用于行内工具组件	{row}: 行数据

events:

事件名	说明	返回值
on-table-current-change	当表格的当前行发生变化的时候会触发	currentRow：当前高亮行的数据 oldCurrentRow：上一次高亮的数据
on-table-select	在多选模式下有效，选中某一项时触发	selection：已选项数据 row：刚选择的项数据
on-table-select-cancel	在多选模式下有效，取消选中某一项时触发	selection：已选项数据 row：刚选择的项数据
on-table-select-all	在多选模式下有效，点击全选时触发	selection：已选项数据
on-table-select-all-cancel	在多选模式下有效，点击取消全选时触发	selection：已选项数据
on-table-selection-change	在多选模式下有效，只要选中项发生变化时就会触发	selection：已选项数据
on-table-sort-change	排序时有效，当点击排序时触发	column：当前列数据 key：排序依据的指标 order：排序的顺序，值为 asc 或 desc
on-table-filter-change	筛选时有效，筛选条件发生变化时触发	当前列数据
on-table-row-click	单击某一行时触发	当前行的数据 index
on-table-row-dblclick	双击某一行时触发	当前行的数据 index
on-table-expand	展开或收起某一行时触发	row：当前行的数据 status：当前的状态
on-table-drag-drop	拖拽排序松开时触发，返回置换的两行数据索引	index1, index2
on-table-search-change	切换页码、每页条数与点击刷新按钮触发，推荐使用	查询字段值，包含分页（激活查询时） start：起始 end: 截止（未激活查询时）
on-page-change	页码改变的回调，返回改变后的页码	页码
on-page-size-change	切换每页条数时的回调，返回切换后的每页条数	page-size

权限设计

页面的权限设计涵盖两个方面，基础视图MViewport以及路由页面中的组件，下面详细说明权限控制层面上的约定。

基础视图

基础视图MViewport可进行权限控制的组件有：

组件	位置	控制方式
模块按钮	顶栏	可通过ViewportModule类型中的hidden参数控制是否隐藏
菜单	左边栏	可通过ViewportModule类型中的hidden参数控制是否隐藏
工具按钮	顶栏	可通过v-if控制显示与隐藏