vue+iview 自定义侧边栏（Sider）触发器（trigger）

#1），记录原因描述：

想要修改Sider的样式（背景颜色），通过给Sider设置了新的class后，背景颜色虽然修改了，但是低端的触发器样式仍然是Menu组件的”Dark“主题样式。

查看官方文档知道，Sider 可以设置 hide-trigger属性来隐藏默认触发器。

#2），模板：

模板大致是iView官方文档中的“Layout布局”中的其中一个。截图如下，代码见官网：

#3），修改的部分：

<style scoped>    
    .bg {
        background : #dcdee2 
    }
</style>
<template>
    <Sider ref="side_r" collapsible :collapsed-width="80" v-model="isCollapsed" class="bg" hide-trigger>
        <Row type="flex" justify="center" align="middle" class="code-row-bg">
            <p style="height: 75px"></p>
                <Col span="4">             
                    <Icon @click.native="collapsedSider" :class="rotateIcon"  type="ios-arrow-dropleft-circle" size="24" ></Icon>     
                </Col>
        </Row>                   
    </Sider>  
</template>
<script>
    export default {
        data () {
        },
        computed: {
            rotateIcon () {
                return [
                    'menu-item',
                    this.isCollapsed ? 'rotate-icon' : ''
                ];
            },          
        },
        methods: {
        }        
    }
</script>

 修改的部分主要是添加一个Icon来作为触发器，定义class=”rotateIcon“来触发点击时侧边栏的开启和关闭。

效果大致如图：

#4），完整代码：

<style scoped>
    .layout-con{
        height: 100%;
        width: 100%;
    }
    .layout-header-bar{
        background: #2b85e4;
        box-shadow : 0 2px 3px 2px rgba(0,0,0,0.2);
    }
    .menu-item span{
        display: inline-block;
        overflow: hidden;
        width: 69px;
        text-overflow: ellipsis;
        white-space: nowrap;
        vertical-align: bottom;
        transition: width .2s ease .2s;       
    }
    .menu-item i{
        transform: translateX(0px);
        transition: font-size .2s ease, transform .2s ease;
        vertical-align: middle;
        font-size: 16px;
    }
    .rotate-icon{        
        transform:translate(-10px,0px) rotate(-180deg);
    }
    .collapsed-menu span{
        width: 0px;
        transition: width .2s ease;
    }
    .collapsed-menu i{
        transform: translateX(0px);
        transition: font-size 0.2s ease 0.2s, transform .2s ease .2s;
        vertical-align: middle;
        font-size: 22px;
    }
    .bg {
        background : #dcdee2 
    }
</style>
<template>
    <div class="layout">
        <Layout :style="{minHeight: '100vh'}"  >
            <Sider ref="side_r" collapsible :collapsed-width="80" v-model="isCollapsed" class="bg" hide-trigger>               
                <Menu  width="auto" :class="menuitemClasses" accordion theme="light">
                    <Submenu name="1" >
                        <template slot="title">
                            <Icon type="ios-paper" />
                            <span>内容管理</span>
                        </template>
                        <MenuItem name="1-1" >
                            <span>文章管理</span>
                            <Icon type="ios-arrow-forward" />    
                        </MenuItem>
                        <MenuItem name="1-2">
                            <span>评论管理</span>
                            <Icon type="ios-arrow-forward" />                           
                        </MenuItem>
                        <MenuItem name="1-3">
                            <span>举报管理</span>
                            <Icon type="ios-arrow-forward" />              
                        </MenuItem>
                    </Submenu>
                    <Submenu name="2">
                        <template slot="title">
                            <Icon type="ios-people" />
                            用户管理
                        </template>
                        <MenuItem name="2-1">新增用户</MenuItem>
                        <MenuItem name="2-2">活跃用户</MenuItem>
                    </Submenu>
                    <Submenu name="3">
                        <template slot="title">
                            <Icon type="ios-stats" />
                            统计分析
                        </template>
                        <MenuGroup title="使用">
                            <MenuItem name="3-1">新增和启动</MenuItem>
                            <MenuItem name="3-2">活跃分析</MenuItem>
                            <MenuItem name="3-3">时段分析</MenuItem>
                        </MenuGroup>
                        <MenuGroup title="留存">
                            <MenuItem name="3-4">用户留存</MenuItem>
                            <MenuItem name="3-5">流失用户</MenuItem>
                        </MenuGroup>
                    </Submenu> 
                </Menu>  
                <Row type="flex" justify="center" align="middle" class="code-row-bg">
                    <p style="height: 75px"></p>
                    <Col span="4">             
                        <Icon @click.native="collapsedSider" :class="rotateIcon"  type="ios-arrow-dropleft-circle" size="24" ></Icon>     
                    </Col>
                </Row>                   
            </Sider>      
            <Layout>
                <Header :style="{padding: 0}" class="layout-header-bar"></Header>

                <Content :style="{padding: '0 16px 16px'}">
                    <div>                       
                    </div>
                </Content>
            </Layout>           
        </Layout>
    </div>
</template>
<script>
    export default {
        data () {
            return {
                isCollapsed: false
            };
        },
        computed: {
            rotateIcon () {
                return [
                    'menu-item',
                    this.isCollapsed ? 'rotate-icon' : ''
                ];
            },
            menuitemClasses: function () {
                return [
                    'menu-item',
                    this.isCollapsed ? 'collapsed-menu' : '',
                ]
            }           
        },
        methods: {
            collapsedSider () {
                this.$refs.side_r.toggleCollapse();
            }
        }        
    }
</script>

#5），说明：

（1）完整代码里面用的其实是一个前辈的模板，但是我有点忘记是从哪里拷贝过来的了。。但是还是表示感谢。。

（2）看了一些官方文档和一些博主的东西才写出来的，借鉴了很多在这里一并感谢。主要是也没有记录就不写参考了。。

（3）新手刚开始学【vue+iview】，所以内容比较简单，主要是督促自己做一点记录。