vue-cd-sidebar

基于Vue的菜单栏的插件

简介

基于Vue的菜单栏的插件。 移植于CodeDrops

安装

npm i vue-cd-sidebar

API

| 属性 | 说明 | 类型 | 默认值 | | ---- | ---- | ---- | ---- | |state|菜单栏的开关状态|bool|false| |close-event|菜单栏的关闭事件| event | - |

Slot

| 名称 | 说明 | 是否必须 | | ---- | ---- | ---- | |nav| 菜单栏的插槽| 是 | |默认| 主体内容 | 是 |

Sample

<template>
<div id="app">
  <vue-cd-sidebar :state="menuState" @close-event="closeMenu">
    <div slot="nav">
      <h2 class="icon icon-lab">Sidebar</h2>
      <ul>
        <li><a class="icon icon-data" href="#">Data Management</a></li>
        <li><a class="icon icon-location" href="#">Location</a></li>
        <li><a class="icon icon-study" href="#">Study</a></li>
        <li><a class="icon icon-photo" href="#">Collections</a></li>
        <li><a class="icon icon-wallet" href="#">Credits</a></li>
      </ul>
    </div>
    <button @click="openMenu">Action</button>
  </vue-cd-sidebar>
</div>
</template>

<script>
export default {
  data () {
    return {
      menuState: false
    }
  },
  methods: {
    openMenu () {
      this.menuState = true
    },
    closeMenu () {
      if (this.menuState) {
        this.menuState = false
      }
    }
  }
}
</script>

注意

根节点的高度最好为100%，以达到比较好的效果

CodeDrops的Demo

CodeDrops的Article