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	是否显示弹出层
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>