zoukankan      html  css  js  c++  java
  • vue

    1.登录之后存储权限到store
    2.layout/components/Sidebar/SiderItem.vue

    <template>
        <div v-if="!item.hidden">
            <template v-if="hasOneShowingChild(item.children, item) && (!onlyOneChild.children || onlyOneChild.noShowingChildren) && !item.alwaysShow">
                <app-link v-if="onlyOneChild.meta && power[item.meta.power]" :to="resolvePath(onlyOneChild.path)">
                    <el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{ 'submenu-title-noDropdown': !isNest }">
                        <item :icon="onlyOneChild.meta.icon || (item.meta && item.meta.icon)" :title="onlyOneChild.meta.title" />
                    </el-menu-item>
                </app-link>
            </template>
    
            <el-submenu v-else-if="power[item.meta.power]" ref="subMenu" :index="resolvePath(item.path)" popper-append-to-body>
                <template slot="title">
                    <item v-if="item.meta" :icon="item.meta && item.meta.icon" :title="item.meta.title" />
                </template>
                <template v-for="child in item.children">
                    <sidebar-item v-if="power[child.meta.power]" :key="child.path" :is-nest="true" :item="child" :base-path="resolvePath(child.path)" class="nest-menu" />
                </template>
                <!-- <sidebar-item  v-for="child in item.children" :key="child.path" :is-nest="true" :item="child" :base-path="resolvePath(child.path)" class="nest-menu" /> -->
            </el-submenu>
        </div>
    </template>
    
    <script>
    import path from 'path';
    import { isExternal } from '@/utils/validate';
    import Item from './Item';
    import AppLink from './Link';
    import FixiOSBug from './FixiOSBug';
    import { mapGetters } from 'vuex';
    export default {
        name: 'SidebarItem',
        components: { Item, AppLink },
        mixins: [FixiOSBug],
        props: {
            // route object
            item: {
                type: Object,
                required: true,
            },
            isNest: {
                type: Boolean,
                default: false,
            },
            basePath: {
                type: String,
                default: '',
            },
        },
        data() {
            // To fix https://github.com/PanJiaChen/vue-admin-template/issues/237
            // TODO: refactor with render function
            this.onlyOneChild = null;
            return {};
        },
        computed: {
            ...mapGetters(['power']),
        },
        methods: {
            hasOneShowingChild(children = [], parent) {
                const showingChildren = children.filter((item) => {
                    if (item.hidden) {
                        return false;
                    } else {
                        // Temp set(will be used if only has one showing child)
                        this.onlyOneChild = item;
                        return true;
                    }
                });
    
                // When there is only one child router, the child router is displayed by default
                if (showingChildren.length === 1) {
                    return true;
                }
    
                // Show parent if there are no child router to display
                if (showingChildren.length === 0) {
                    this.onlyOneChild = { ...parent, path: '', noShowingChildren: true };
                    return true;
                }
    
                return false;
            },
            resolvePath(routePath) {
                if (isExternal(routePath)) {
                    return routePath;
                }
                if (isExternal(this.basePath)) {
                    return this.basePath;
                }
                return path.resolve(this.basePath, routePath);
            },
        },
    };
    </script>
    
    {
        path: "/dashboard",
        component: Layout,
        redirect: "/dashboard",
        meta: { title: "首页", icon: "dashboard", power: "index" }
        children: [
          {
            path: "/dashboard",
            name: "Dashboard",
            component: () => import("@/views/dashboard/index"),
            meta: { title: "首页", icon: "dashboard", power: "index" }
          }
        ]
      },
    
  • 相关阅读:
    Android 2.2 r1 API 中文文档系列(11) —— RadioButton
    Android API 中文 (15) —— GridView
    Android 中文 API (16) —— AnalogClock
    Android2.2 API 中文文档系列(7) —— ImageButton
    Android2.2 API 中文文档系列(6) —— ImageView
    Android 2.2 r1 API 中文文档系列(12) —— Button
    Android2.2 API 中文文档系列(8) —— QuickContactBadge
    [Android1.5]TextView跑马灯效果
    [Android1.5]ActivityManager: [1] Killed am start n
    Android API 中文(14) —— ViewStub
  • 原文地址:https://www.cnblogs.com/gggggggxin/p/14236777.html
Copyright © 2011-2022 走看看