CommonLayer 系统整体布局

基础用法

更多简体中文

配置参数

menu相关字段

参数	说明	类型	是否必须
isCollapse	侧边栏折叠与展开，默认为false	Boolean	false
menuList	菜单栏menu列表，如果没有菜单时，可以不传	Array[]	false
----label	菜单展示项	String	true
----name	菜单路由名称，与path中的路劲保持一致	String	true
----icon	菜单左侧的icon，默认可以从common-icon中去做选择	String	false
----level	菜单层级	Number	true
----path	菜单路径，默认语name相同	String	true

header相关字段

参数	说明	类型	是否必须
headerInfo		Object	false
----logo	产品logo路劲，遵循vue静态文件引入方式即可	File	true
----title	产品名称	String	true
----menus	todo： header中菜单方式	String	false
showMore	是否显示加载更多按钮文字	Boolean	false
showLang	是否显示切换语言文字	Boolean	false
showSearch	是否显示header中的搜索按钮	Boolean	false
showInformation	是否显示说明文档图标或者文字	Boolean	false
showMessage	是否显示message icon	Boolean	false
userInfo	用户信息	Object	true
----src	用户头像连接	String	true
----userAccount	用户名称	String	true
commonds	header中点击头像时触发的下拉时间列表	Object	true
----commond	触发commond的name，例如logout/goInfo	String	true
----label	commond展示文本	String	true

其他字段

参数	说明	类型	是否必须
breads	整体框架中的面包屑展示，需要与router信息配合，此字段取自route-> meta -> breadcrumb 中的breadcrumb字段，所以需要引入route后方可实现	Array	false
asideWidth	侧边栏位宽度，默认'260px'	String	false

事件

事件名称	说明	回调
handleChangeCollapse	点击collape时，收缩时的宽度	--

<script setup lang="ts">
import { ref } from 'vue';
// import { useRoute } from 'vue-router';
// import logo from './assets/images/hd-logo.svg';

const menuList = ref<any>([
  {
    label: '表格示例',
    name: 'table',
    icon: 'common-jihuoshebei',
    level: 1,
    path: '/table'
  },
  {
    label: '栅格示例',
    name: 'grid',
    icon: 'common-jihuoshebei',
    level: 1,
    path: '/grid'
  },
  {
    label: '卡片示例',
    name: 'card',
    icon: 'common-jihuoshebei',
    level: 1,
    path: '/card'
  },
  {
    label: '标签页示例',
    name: 'tabs',
    icon: 'common-jihuoshebei',
    level: 1,
    path: '/tabs'
  },
  {
    label: '描述页示例',
    name: 'info',
    icon: 'common-jihuoshebei',
    level: 1,
    path: '/info'
  },
  {
    label: '复杂表格',
    name: 'complex-form',
    icon: 'common-jihuoshebei',
    level: 1,
    path: '/complex-form'
  },
  {
    label: '弹窗demo',
    name: 'dialog',
    icon: 'common-jihuoshebei',
    level: 1,
    path: '/dialog'
  },
  {
    label: '上传组件demo',
    name: 'upload',
    icon: 'common-jihuoshebei',
    level: 1,
    path: '/upload'
  },
  {
    label: '图标集合',
    name: 'icons',
    icon: 'common-jihuoshebei',
    level: 1,
    path: '/icons'
  }
]);

const headerInfo = ref<any>({
  // title: 'AIoT Edge管理平台',
  // logo
});
// const route = useRoute();

const userInfo = ref<any>({
  userAccount: 'deployer'
});
const commonds = ref<any>([
  { label: '个人中心', commond: 'user' },
  { label: '退出登录', commond: 'logout' }
]);
const asideWidth = ref<any>('260px');
const isCollapse = ref<any>(false);

function handleChangeCollapse(collapse: any) {
  isCollapse.value = collapse;
  if (isCollapse.value) {
    asideWidth.value = '70px';
  } else {
    asideWidth.value = '260px';
  }
}
</script>

<template>
  <common-layer
    :menu-list="menuList"
    :user-info="userInfo"
    :header-info="headerInfo"
    :commonds="commonds"
    :is-collapse="isCollapse"
    :aside-width="asideWidth"
    @handle-change-collapse="handleChangeCollapse"
  ></common-layer>
</template>

<script setup lang="ts">
import { ref } from 'vue';
// import { useRoute } from 'vue-router';
// import logo from './assets/images/hd-logo.svg';

const menuList = ref<any>([
  {
    label: '表格示例',
    name: 'table',
    icon: 'common-jihuoshebei',
    level: 1,
    path: '/table'
  },
  {
    label: '栅格示例',
    name: 'grid',
    icon: 'common-jihuoshebei',
    level: 1,
    path: '/grid'
  },
  {
    label: '卡片示例',
    name: 'card',
    icon: 'common-jihuoshebei',
    level: 1,
    path: '/card'
  },
  {
    label: '标签页示例',
    name: 'tabs',
    icon: 'common-jihuoshebei',
    level: 1,
    path: '/tabs'
  },
  {
    label: '描述页示例',
    name: 'info',
    icon: 'common-jihuoshebei',
    level: 1,
    path: '/info'
  },
  {
    label: '复杂表格',
    name: 'complex-form',
    icon: 'common-jihuoshebei',
    level: 1,
    path: '/complex-form'
  },
  {
    label: '弹窗demo',
    name: 'dialog',
    icon: 'common-jihuoshebei',
    level: 1,
    path: '/dialog'
  },
  {
    label: '上传组件demo',
    name: 'upload',
    icon: 'common-jihuoshebei',
    level: 1,
    path: '/upload'
  },
  {
    label: '图标集合',
    name: 'icons',
    icon: 'common-jihuoshebei',
    level: 1,
    path: '/icons'
  }
]);

const headerInfo = ref<any>({
  // title: 'AIoT Edge管理平台',
  // logo
});
// const route = useRoute();

const userInfo = ref<any>({
  userAccount: 'deployer'
});
const commonds = ref<any>([
  { label: '个人中心', commond: 'user' },
  { label: '退出登录', commond: 'logout' }
]);
const asideWidth = ref<any>('260px');
const isCollapse = ref<any>(false);

function handleChangeCollapse(collapse: any) {
  isCollapse.value = collapse;
  if (isCollapse.value) {
    asideWidth.value = '70px';
  } else {
    asideWidth.value = '260px';
  }
}
</script>

<template>
  <common-layer
    :menu-list="menuList"
    :user-info="userInfo"
    :header-info="headerInfo"
    :commonds="commonds"
    :is-collapse="isCollapse"
    :aside-width="asideWidth"
    @handle-change-collapse="handleChangeCollapse"
  ></common-layer>
</template>

CommonLayer 系统整体布局 #

基础用法 #

配置参数 #

事件 #

CommonLayer 系统整体布局

基础用法

配置参数

事件