@cui_xl/layout-format v0.1.2

layout-format

使用步骤

1. 安装 npm i @cui_xl/layout-format

2. 引入插件

import layoutFormat from '@cui_xl/layout-format'
import '@cui_xl/layout-format/lib/layout-format.css'
export default Vue => {
  Vue.use(layoutFormat)
}

3. 在页面文件中引用 新增menu-title

<template>
  <layout-format :no-header="false"
          :no-sidebar="false"
          :header-fixed="true"
          :sidebar-fixed="false"
          :side-menu="menu">
    <com-header slot="header"></com-header>
    <div slot="sideTitle">
      <h1 style="color: red; margin-left: 30px;line-height: 50px;">231231</h1>
    </div>
    <slot>
      <h1>layout-format </h1>
      <h2>属性</h2>
      <ol>
        <li>no-header:(Boolean)true|false</li>
        <li>no-sidebar:(Boolean)true|false</li>
        <li>header-fixed:(Boolean)true|false</li>
        <li>sidebar-fixed:(Boolean)true|false</li>
        <li>side-menu:(Array)</li>
      </ol>
    </slot>
  </layout-format>
</template>

4. menu.js返回数组格式定义

{
    key: 'dashboard',
    name: 'Dashboard',
    icon: 'fu fu-app_o',
    path: '/dashboard',
  },
  {
    key: 'table',
    name: '表格页',
    icon: 'fu fu-table',
    type: 'submenu',
    children: [
      {
        key: 'simpleTable',
        name: '简单表格',
        path: '/simple-table',
      },
      {
        key: 'basicTable',
        name: '基本表格',
        path: '/basic-table',
      },
      {
        key: 'searchTable',
        name: '查询表格',
        path: '/search-table',
      },
    ],
  },

其他说明

1. <com-header> 组件根据需求自定义