----------------------------------------华丽丽的分割线----------------------------------------
iview4如何把form表单里的input输入框和点击输入框之后的边框去掉?
iview 的form表单
<Form :model="form" :label-width="80">
<FormItem label="地址">
<!--地址-->
<Input v-model="form.input" placeholder="Enter something..."/>
</FormItem>
</Form>
ps: 那个小手是鼠标的那个小手
.ivu-input {
border: 0;
cursor: pointer; // 小手
}
.ivu-input:focus {
border:none;
box-shadow: 0 0 0 2px transparent; // 这个是去除标签的最主要style
display: none;
}
上面页面Form的样式↓
外面包的是个box 然后加个Divider (iview的分割线) 隔开
iview 菜单+滑动出children菜单 (ul+li)
这个是侧边主菜单的ul+li方式简单代码 后续加上后台数据会再来
/*开始菜单*/
.side-menu.menu-wrapper {
width: 100%;
height: 100%;
overflow: auto;
.menu-list {
border-bottom-color: #191a23;
.menu-item {
position: relative;
padding: 14px 0;
text-align: center;
font-size: 12px;
color: #ededed;
cursor: pointer;
.menu-name {
padding: 2px 0;
}
.sub-menu-wrapper {
position: fixed;
}
}
}
}
/*结束菜单*/
此处↓是主菜单滑动鼠标后对应的子菜单(下面是假数据固定的设置的子菜单数据)
/*children菜单 start*/
.main-drawer {
width: 200px;
height: 100%;
position: absolute;
left: 60px;
z-index: 1;
font-size: 14px;
.ul-menu-list {
height: 100%;
background-color: #ffffff;
padding: 20px 15px;
list-style-type: none;
.ul-list-item {
padding: 8px 0px;
margin-left: 8px;
cursor: pointer;
letter-spacing: 1px;
.main-font {
margin-left: 10px;
}
.menu-list-wer {
padding: 5px 0 0 30px;
list-style-type: none;
.li-list-wer {
padding: 3px;
}
}
}
}
}
/*children菜单 end*/