lc-vue-pro-layout

基于vue3+element-plus的高级布局组件

安装

npm i lc-vue-pro-layout

基本使用

<template>
  <el-form inline>
    <el-form-item label='layout'>
      <el-radio-group v-model='layout'>
        <el-radio-button label='mix' />
        <el-radio-button label='side' />
        <el-radio-button label='top' />
      </el-radio-group>
    </el-form-item>
    <el-form-item>
      <el-checkbox v-model='suppressSiderWhenMenuEmpty'>
        suppressSiderWhenMenuEmpty
      </el-checkbox>
    </el-form-item>
  </el-form>
  <div style='height: 900px;border: 1px solid #000000;'>
    <pro-layout
      ref='layoutRef'
      :menu='menu'
      :avatar='avatar'
      :layout='layout'
      :suppress-sider-when-menu-empty='suppressSiderWhenMenuEmpty'
      @avatar-command='handleAvatarCommand'
      @menu-select='onMenuSelect'>
      <el-button @click='jump("welcome1-1")'>
        首页1-1
      </el-button>
      <el-button @click='jump("welcome1")'>
        首页1
      </el-button>

      <template #avatarDropdown>
        <el-dropdown-menu>
          <el-dropdown-item command='a'>
            Action 1
          </el-dropdown-item>
          <el-dropdown-item command='b'>
            Action 2
          </el-dropdown-item>
          <el-dropdown-item command='c'>
            Action 3
          </el-dropdown-item>
          <el-dropdown-item command='d' disabled>
            Action 4
          </el-dropdown-item>
          <el-dropdown-item command='e' divided>
            Action 5
          </el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </pro-layout>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue';
import { ProLayout } from 'lc-vue-pro-layout';

const menuData = [
  {
    'key': 'welcome',
    'label': '首页',
    'icon': 'House',
    'children': [
      {
        'key': 'welcome1-1',
        'icon': 'House',
        'label': '首页1-1',
        'children': null
      },
      {
        'key': 'welcome1-2',
        'icon': 'House',
        'label': '首页1-2',
        'children': null
      }
    ]
  },
  {
    'key': 'welcome1',
    'label': '首页1',
    'icon': 'House',
    'children': null
  },
  {
    'key': 'welcome2',
    'label': '首页2',
    'icon': 'House',
    'children': null
  },
  {
    'key': 'welcome3',
    'label': '首页3',
    'icon': 'House',
    'children': null
  }
];

const layoutRef = ref();
const layout = ref('mix');
const suppressSiderWhenMenuEmpty = ref(false);
const menu = reactive({
  data: menuData,
  index: 'welcome1-2'
});
const avatar = reactive({
  src: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
  title: 'name'
});

const onMenuSelect = (...args) => {
  console.log('onMenuSelect', args);
};

const handleAvatarCommand = (...args) => {
  console.log('handleAvatarCommand', args);
};

const jump = (index: string) => {
  layoutRef.value.setMenuIndex(index);
};
</script>

Api

Attributes

属性名	说明	类型	默认值
title	左上角标题	string	lc pro
layout	布局类型	'side' | 'top' | 'mix'	side
siderWidth	左侧sider宽度	number	256
suppressSiderWhenMenuEmpty	是否支持menu为空时隐藏sider	boolean	false
menu	菜单数据	MenuProps	-
avatar	头像数据	AvatarProps	-
collapsed	是否折叠	boolean	false
hiddenCollapsedButton	是否隐藏折叠按钮	boolean	false

Events

事件名	说明	类型
menu-select	菜单选择	index: 选中菜单项的 index
avatar-command	头像dropdown command	command

Slots

插槽名	说明
default	布局主数据
menuHeader	渲染菜单头
menuFooter	渲染菜单页脚
actions	渲染actions区域
avatarDropdown	渲染头像dropdown

Exposes

名称	描述	类型
setMenuIndex	设置menu选中的index	(index:string)=>{}
setCollapsed	设置sider是否折叠	(collapsed: boolean)=>{}

Types

MenuProps

interface MenuProps {
  data: MenuItem[],
  index: string,
  uniqueOpened?: boolean
}

MenuItem

interface MenuItem {
  key: string,
  label: string,
  icon?: string,
  subPages?: string[],
  children?: MenuItem[]
}

AvatarProps

interface AvatarProps{
  src?: string,
  title?: string
}