vue+iview 自定义侧边栏(Sider)触发器(trigger)

#1),记录原因描述:

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

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

#2),模板:

模板大致是iView官方文档中的“Layout布局”中的其中一个。截图如下,代码见官网:vue+iview 自定义侧边栏(Sider)触发器(trigger)_第1张图片

#3),修改的部分:



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

效果大致如图:

vue+iview 自定义侧边栏(Sider)触发器(trigger)_第2张图片

#4),完整代码:




#5),说明:

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

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

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

你可能感兴趣的:(vue+iview)