xxweb-box

前端页面空壳，vue3版

依赖组件

• element-ui/element-plus
• vue-router

安装

yarn add [email protected]

或者

npm install [email protected]

使用

安装组件

import router from "@/router"
import XXWebBox from 'xxweb-box'
Vue.use(XXWebBox)
new Vue({
    router,
    render: h => h(App),
}).$mount('#app')

定义project

export default {
    nameSpace: "xxweb-box",
    redirect: {
        index: '/',
        login: '/login',
        "404": '/404'
    },
    style: {
        theme: 'vue-admin',
        layout: 'sideMenu',
        multiPage: true,
        fixSideMenu: false,
    }
}

定义权限

import {Box} from '@element-plus/icons-vue'
import {ElIcon} from "element-plus";
export default [
    {
        path: '/',
        meta: { 
            title: 'xxweb-box',
            icon:()=>(<ElIcon><Box/></ElIcon>)
        },
    }
]

组件中使用

  <div id="app">
    <XXWebBox :appConfig="project" :permission="permission"></XXWebBox>
  </div>
<script>
import project from "./project.js";
import permission from "./permission.js";
export default {
  name: 'App',
  data(){
    return {
      project:project,
      permission:permission
    }
  }
}
</script>

属性

|prop|remark| |---|---| |appConfig|应用配置| |permission|权限数据| |initCollapse|初始是否收缩，默认值false|

事件

|methodName|methodParams|remark| |---|---|---| |dropdownMenuClick|command,string|用户下拉菜单点击事件，默认command：clearCache,changePwd,exitSystem| |collapseToggle|isCollapse,boolean|收缩切换事件| |menuClick|path,string|菜单模式为event时的点击事件|

钩子函数

| path | params | remark | |-------|-------------------------|-------------| | appConfig.config.tabs.onBeforeMetaTitle | view:tab对象,route:当前路由对象 | 生成tab标签钩子函数 |

示例

<script>
  export default {
    mounted(){
      this.project.config.tabs.onBeforeMetaTitle=(view,route)=>{
        if(route.params&&route.params.hasOwnProperty('title')){
          view.meta.title += "-"+route.params.title
        }
      }
    }
  }
</script>

插槽

side

左边栏

|slotName|slotProps|remark| |---|---|---| |side|:data="{isCollapse,permission}"|整个侧边栏| |side-logo|---|logo| |side-userMenu|---|用户菜单| |side-user-userName|---|用户名| |side-user-dropdownMenuItem|:menu="menu"|用户下拉菜单| |side-user-tag|---|标签| |side-user-tag-text|---|标签文字|

head

顶栏

|slotName|slotProps| remark | |---|---|----------| |head-hamburger|:data="{isCollapse,permission}"| 收缩控制 | |head-logo|---| logo | |head-title|---| 标题 | |head-breadcrumb|---| 面包屑 | |head-top-menu-wrap|:app="app"| 顶部菜单容器 | |head-top-menu|:permission="permission"| 顶部菜单 | |head-expand-left-start|---| 顶部左侧开头扩展 | |head-expand-left-end|---| 顶部左侧结尾扩展 | |head-expand-center|---| 顶部中间扩展 | |head-expand-right-start|---| 顶部右侧开头扩展 | |head-expand-right-end|---| 顶部右侧结尾扩展 | |head-searchMenu|---| 查询 | |head-fullScreen|---| 全屏 | |head-userMenu|---| 用户菜单 | |head-user-userName|---| 用户名 | |head-user-dropdownMenuItem|:menu="menu"| 用户下拉菜单 | |head-user-tag|---| 标签 | |head-user-tag-text|---| 标签文字 |

footer

底栏

|slotName|slotProps|remark| |---|---|---| |footer|---|整个底部|