Nibbling Pastry Monster

    meiko
    TypeScript icon, indicating that this package has built-in type declarations

    1.5.3 • Public • Published

    Meiko

    前端通用组件与工具库,该框架基于iViewVueTypeScriptLess等。致力于更轻松的构建前端项目。

    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控制显示与隐藏

    Keywords

    none

    Install

    npm i meiko

    DownloadsWeekly Downloads

    2

    Version

    1.5.3

    License

    none

    Unpacked Size

    113 kB

    Total Files

    28

    Last publish

    Collaborators

    • konglw