README

vuetwo-side-bar

This plugin is a simple sidebar made with VUE2.0

verticle straight

install

npm install vuetwo-side-bar

use

import VueSideBar from "vuetwo-side-bar";
&&
components: { VueSideBar },

coordinate ElementUI-icon

Because the font library used in this project is ElementUI , you can skip this step if your project is using ElementUI

<!-- The introduction of the style -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

Of course, you can also use ICONS from other font libraries

For example: Font Awesome, iView can be, the principle is the same, I tag with its own class name

html

<VueSideBar
  :data="sidebar"
  :activeIndex="activeIndex"
  :color="color"
  :activeColor="activeColor"
  :BackgroundColor="BackgroundColor"
  :activeBackgroundColor="activeBackgroundColor"
  @click-sidebar="getClick"
></VueSideBar>

sidebar: [
  {
    label: "概况",
    id: "1",
    icon: "el-icon-menu",
  },
  {
    label: "质量问题",
    id: "2",
    icon: "el-icon-info",
},
{
    label: "安全问题",
    id: "3",
    icon: "el-icon-error",
},
{
    label: "拆迁问题",
    id: "4",
    icon: "el-icon-s-flag",
},
{
    label: "工地视联",
    id: "5",
    icon: "el-icon-video-camera",
  },
],
activeIndex: 1,
color: "#fff",
activeColor: "#2196f3",
activeBackgroundColor: "rgba(255,255,255,.2)",
BackgroundColor: "rgb(44, 62, 80)",

methods

getClick(data){
  this.activeIndex = data.activeIndex
},

parameter

name	type	required	default	describe
data	Array	true	[]	data item
activeIndex	Number	true	null	Select the subscript
color	String	false	#fff	font color
BackgroundColor	String	false	#000	background color
activeColor	String	false	#2196f3	Select the color
activeBackgroundColor	String	false	rgba(255,255,255,.1)	Select the background color
type	String	false	verticle	Display type `straight` 、 `verticle`

event

click-sidebar
- describe : Click the trigger to return with data and index and event source
- returned value
  - e : event source
  - d : Select data item
  - i : Select the subscript
click-mouseover
- describe : Remove the trigger to return data, indexes, and event sources
- returned value
  - e : event source
  - d : Select data item
  - i : Select the subscript
click-mouseout
- describe : Moving into a trigger returns data, indexes, and event sources
- returned value
  - e : event source
  - d : Select data item
  - i : Select the subscript

Usage no npm install needed!