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】,所以内容比较简单,主要是督促自己做一点记录。