根据iviewUI官网 https://www.iviewui.com/components/layout#ZDYCFQ ,写侧边菜单遇到的问题
实现代码,使用了自定义触发器@click.native="collapsedSider"(自定义触发器,可以设置hide-trigger
属性)
<style scoped>
.layout {
border: 1px solid #d7dde4;
background: #f5f7f9;
position: relative;
border-radius: 4px;
overflow: hidden;
}
.layout-header-bar{
background: #fff;
box-shadow: 0 1px 1px rgba(0,0,0,.1);
}
.layout-logo {
width: 200px;
height: 80px;
border-radius: 3px;
float: left;
position: relative;
top: 0px;
left: -90px;
}
.layout-nav {
width: 100%;
margin-right: 0;
}
.layout-con{
height: 100%;
width: 100%;
}
.menu-item span{
display: inline-block;
overflow: hidden;
/*width: 80px;*/
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;
}
.collapsed-menu span{
width: 0px;
transition: width .2s ease;
}
.collapsed-menu i{
transform: translateX(0px);
transition: font-size .2s ease .2s, transform .2s ease .2s;
vertical-align: middle;
font-size: 22px;
}
.collapsed-menu .ivu-icon-ios-arrow-down{
display: none;
}
</style>
<template>
<div class="layout" >
<Layout>
<Header>
<Menu mode="horizontal" theme="dark">
<div class="layout-nav">
<div style="float: left">
<MenuItem name="0">
<span style="margin-left: -50px;margin-top:-25px;line-height: 10px;font-weight: bold;font-size: 16px">车险管理系统(1.0)</span>
</MenuItem>