更好用的侧边栏工具-----better-sidebar

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

封装思路

1. 由两个组件组成，父组件用来包裹，子组件用来放具体内容（受element-ui组件库的时间线的启发）
2. 支持位置自定义，返回顶部按钮可选
3. 子组件better-sidebar-item可以自定义图标，标题，弹层，跳转链接
4. 弹层内容通过插槽引入

最终效果

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

文档地址

地址

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	-	-	点击跳转到新的页面地址

使用

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

开源协议

MIT License

github地址

地址