更好用的側邊欄工具-----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地址

地址