Xxweb-box NPM | npm.io

xxweb-box

可复用的web常用页面

xxweb-box

依赖组件

vue-router

内置组件

布局页(6种，含左右，上下布局)
登录页(5种)
404页面(3种)
403页面(2种)

安装

yarn add xxweb-box

或者

npm install xxweb-box

使用

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

// /router/util.js
import Vue from 'vue';
import Router from 'vue-router';
import HelloWorld from '../components/HelloWorld.vue'
Vue.use(Router);

export default new Router({
    routes: [
        {
            path: '/',
            name: HelloWorld.name,
            component: HelloWorld,
            props:true
        }
    ]
})

// permission.js
export default [
    {
        path: '/',
        meta: { title: 'helloWorld', icon: 'el-icon-folder-opened' },
    }
]

// appConfig.js
export default {
    namespace: "helloWorld",
    redirect: {
        index: '/',
        login: '/login',
        "404": '/404'
    },
    style: {
        theme: 'vue-admin',
        color: '#1890FF',
        layout: 'sidemenu',
        multipage: true,
        fixSideMenu: false,
    },
    config: {
        logo: "https://dev.dpark.com.cn/iplatform/files/s2-logo/logo.png",
        title: "helloWorld",
        login: {
            title: "helloWorld",
            desc: ""
        },
        menu:{
            mode:'router'
        },
        head: {
            hamburger:false,
            logo:{
                show: true,
            },
            title: {
                show: false,
                desktop: "",
                mobile: ""
            },
            breadcrumb: {
                show: true,
            },
            searchMenu: {
                show: true
            },
            helper: {
                show: false,
                href: "javascript:;",
                target: "_blank"
            },
            fullscreen: {
                show: true,
            },
            user: {
                show: true,
                username: true,
                menu: {
                    show: true,
                    clearCache: true,
                    changePwd: true,
                    exitSystem: true
                }
            }
        },
        sideMenu: {
            title: "helloWorld",
            width: '200px',
            hamburger:true,
            logo:{
                show: true,
            },
            user: {
                show: false,
                username: true,
                tag:true,
                menu: {
                    show: true,
                    clearCache: true,
                    changePwd: true,
                    exitSystem: true
                }
            }
        },
        tabs: {
            show:true,
            icon: false,
        },
        footer: {
            show: true,
            links: [],
            copyright: {
                content: "xxweb-box",
                year: "2022",
                href: "javascript:;",
                target: "_blank"
            }
        },
        plugins: {}
    }
}

<!-- App.vue -->
  <div id="app">
    <XXWebBox :appConfig="appConfig" :permission="permission"></XXWebBox>
  </div>
<script>
import appConfig from "./appConfig";
import permission from "./permission";
export default {
  name: 'App',
  data(){
    return {
      appConfig:appConfig,
      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时的点击事件

插槽

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-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	---	标签文字