前端 点击侧边栏更换背景颜色_更好用的侧边栏工具bettersidebar

可能是我格局比较小，没有在市面上见过类似的侧边栏工具，所以想封装一个这样的组件。也是受我们官网的启发，效果如下：

封装思路

1. 由两个组件组成，父组件用来包裹，子组件用来放具体内容(受element-ui组件库的时间线的启发)

2. 支持位置自定义，返回顶部按钮可选

3. 子组件better-sidebar-item可以自定义图标，标题，弹层，跳转链接

4. 弹层内容通过插槽引入

最终效果

目前就能想到这么些东西，封装难度并不大，下面是使用说明：

文档地址

https://www.liuguisheng.vip/better-sidebar/

better-sidebar(侧边栏工具)

下载依赖

npm i better-sidebar --save

引用

import Vue from "vue";import BetterSidebar from "better-sidebar";import "better-sidebar/dist/lib/better-sidebar.css";
Vue.use(BetterSidebar);

better-sidebar 组件介绍

属性	类型	可选值	默认值	描述
top	number	-	100	侧边栏距离浏览器顶部的位置
position	string	left/right	right	侧边栏的位置
topButton	boolean	true/false	true	是否显示返回顶部按钮

better-sidebar-item 组件介绍

属性	类型	可选值	默认值	描述
icon	string	-	-	图标字体(该依赖不提供,需要自行下载,引入项目中)
title	string	-	-	文字
popver	boolean	true/false	false	是否显示弹出层(内容通过slot插入)
link	string	-	-	点击跳转到新的页面地址

使用

class="cell-box"icon="icon-gonggao iconfont"title="公告"popver="true"
        >插槽      >class="cell-box"icon="icon-biaoge iconfont"title="统计"link="https://www.liuguisheng.vip"
      />class="cell-box"icon="icon-huodong iconfont"title="活动"
      />

开源协议

https://github.com/qisi007/better-sidebar/blob/main/LICENSE

github地址

https://github.com/qisi007/better-sidebar 欢迎star ? 往期博客： vue大型项目高性能优化----想说爱你真的不容易 干货来了，关于解决前后端分离的seo问题 前端人员开发书籍【不断更新】