iView 4.* 自定义侧边栏触发器（修正）

#1）问题：

去年刚接触vue，写过有关通过iView框架自定义侧边栏触发器的内容。当时对vue和它的生态一窍不通，也没什么基础，回头看之前的那篇文章，我觉得还有很多问题没有解决。另外还有两个小伙伴有问到上一篇中，菜单伸展隐藏的问题，借此机会重新把之前写的整理一下，同时解决一下之前没有解决的问题，希望能给一些小伙伴一些帮助。

#2）过程：

2.1  依赖包，"view-design": "^4.3.2"

2.2 vue-cli创建一个hello项目（过程略）

2.3 使用iView官网的布局模板

2.4 左侧侧边栏的菜单中，添加子菜单组件；右侧头部添加标题；

#3）问题：

（1）解决的主要问题是iview中多级子菜单没有隐藏的问题

主要思路是借鉴 上文2.3中官网的布局模板。

给子菜单中的每一个MenuItem 添加Icon标签和span标签，设置不同的css样式，在侧边栏伸展的时候，赋予不同的css样式。

<template>
    <Submenu name="2">
        <template slot="title">
            <Icon type="ios-people" />
            <span> 子菜单标题</span>
        </template>
        <MenuItem v-for="(item, index) in titleList" :key="index" :title="item.title">
            <Icon type="ios-more" />
            <span> {{ item.title }}</span>
        </MenuItem>
    </Submenu>
</template>

（2）使用iview框架的 submenu 组件，修改它的样式的时候遇到了一些问题，主要是没办法选择到它的标题部分，不能修改它的padding，造成的问题如图。图标和标题文字混在一起。

     

修改样式方法：使用 >>> 

vue引用了第三方组件，需要在组件中局部修改第三方组件的样式，而又不想去除scoped属性造成组件之间的样式污染。此时只能通过>>>，穿透scoped。

>>> .ivu-menu-item {
    padding: 10px 15px !important;
}
>>> .ivu-menu-submenu-title {
    padding: 10px 15px !important;
}
>>> .ivu-menu-vertical .ivu-menu-submenu-title-icon {
    right: 4px !important;
}

（3）隐藏后，悬停在每个menuitem上显示他的title用来弥补无法看到其中文字的不足。

<MenuItem v-for="(item, index) in titleList" :key="index" :title="item.title">
    <Icon type="ios-more" /><span> {{ item.title }}</span>
</MenuItem>

 

#4）完整代码：

<template>
    <div class="layout">
        <Layout>
            <Sider ref="leftside" hide-trigger collapsible :collapsed-width="78" v-model="isCollapsed">
                <Menu active-name="" theme="dark" width="auto" :class="menuitemClasses">
                    <Submenu name="2">
                        <template slot="title">
                            <Icon type="ios-people" />
                            <span> 子菜单标题</span>
                        </template>
                        <MenuItem v-for="(item, index) in titleList" :key="index" :title="item.title">
                            <Icon type="ios-more" /><span> {{ item.title }}</span>
                        </MenuItem>
                    </Submenu>
                </Menu>
            </Sider>
            <Layout>
                <Header :style="{ padding: 0 }" class="layout-header-bar">
                    <Icon @click.native="collapsedSider" :class="rotateIcon" :style="{ margin: '0 20px' }" type="md-menu" size="24"></Icon> 
                    <span>Demo</span>
                </Header>
                <Content>
                    <mt></mt>
                </Content>
            </Layout>
        </Layout>
    </div>
</template>
<script>
import mt from '../components/mapTwo.vue';
export default {
    components: { mt },
    data() {
        return {
            isCollapsed: false,
            titleList: [
                {
                    index: 1,
                    title: '标题标题标题标题标题标题标题标题标题标题标题标题1',
                },
                {
                    index: 2,
                    title: '标题2',
                },
                {
                    index: 3,
                    title: '标题3',
                },
            ],
        };
    },
    computed: {
        rotateIcon() {
            return ['menu-icon', this.isCollapsed ? 'rotate-icon' : ''];
        },
        menuitemClasses() {
            return ['menu-item', this.isCollapsed ? 'collapsed-menu' : ''];
        },
    },
    methods: {
        collapsedSider() {
            this.$refs.leftside.toggleCollapse();
        },
    },
};
</script>
<style scoped>
.layout {
    border: 1px solid #d7dde4;
    background: #fff;
    position: relative;
    border-radius: 4px;
    overflow: hidden;
}
.layout-header-bar {
    background: #fff;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}
.menu-icon {
    cursor: pointer;
    transition: all 0.5s;
}
.rotate-icon {
    transform: rotate(-90deg);
}
.menu-item span {
    display: inline-block;
    overflow: hidden;
    width: 80%;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
    transition: width 0.2s ease 0.2s;
}
.menu-item i {
    transform: translateX(0px);
    transition: font-size 0.2s ease, transform 0.2s ease;
    vertical-align: left;
    font-size: 16px;
}
.collapsed-menu span {
    width: 0px;
    transition: width 0.2s ease;
}
.collapsed-menu i {
    transform: translateX(5px);
    transition: font-size 0.2s ease 0.2s, transform 0.2s ease 0.2s;
    vertical-align: left;
    font-size: 22px;
}

>>> .ivu-menu-item {
    padding: 10px 15px !important;
}
>>> .ivu-menu-submenu-title {
    padding: 10px 15px !important;
}
>>> .ivu-menu-vertical .ivu-menu-submenu-title-icon {
    right: 4px !important;
}
</style>