Sidebar

一个可以收缩,展开,悬浮,支持多级子菜单的左侧导航栏

请注意, 本页的所有演示代码, 在打开之前,请关闭其他所有激活的示例, 不然会导致 bug。 NlyAdminlteVue 只允许一个 sidebar 存在,因为本页是文档演示, 使用 v-if 渲染多个 sidebar, 请保证本页同时只有一个 sidebar 被激活

  • 左侧导航栏容器, 收起成只有 icon 的导航栏,需要 body 中有 class='sidebar-mini sidebar-collapse',如果只有 sidebar-collapse,则会将左侧导航栏滑到左侧区域外,不可见。sidebar-collapse 用来控制左侧导航栏展开收缩。sidebar-mini 允许左侧导航栏收起到只有图标的状态

  • nly-sidebar-menunly-sidebar-container 的收起和展开是由指令 v-nly-sidebar-collapse 来实现的,单独使用并无效果。

  • nly-sidebar-menunly-sidebar-container 的差别在于使用 nly-sidebar-menu 可以传入一个数组来渲染菜单, 而 nly-sidebar-container 则需要使用嵌套组件一个一个写入。 当然也可以使用 nly-render-function 组件来传入数组渲染,详情请查看 数组渲染页面组件

  • 下拉菜单元素组件 nly-sidebar-nav-tree,默认所有下拉菜单为手风琴模式,如需关闭,请给每个 nly-sidebar-nav-tree 设置 accordion=null

  • 如果需要分组手风琴,请给同一组的 nly-sidebar-nav-tree 设置相同的 accordion

  • 请保证 nly-sidebar-nav-treetarget 唯一, nly-sidebar-nav-tree 是通过 target 来控制对应元素收起展开的。 且 target 并没有设置默认值,多个相同,会导致一起展开收起。

  • 如果有多个 nly-sidebar-nav-treetarget 相同,请勿设置 visible=true,会导致浏览器崩溃

  • 如果有多级导航栏, 需要手风琴模式,请给同一级别的导航元素设置相同的 accordion, 不同级别导航 accordion 请设置唯一值

  • nly-sidebar-menu 如果需要自动开启路由匹配模式, 给每一个 nly-sidebar-nav-treenly-sidebar-nav-item 传入 exact: true, 请不要给设置元素设置 visible 属性

  • sidebar 需要布局容器 nly-wrapper 来配合布局, 请设置 nly-wrappper, 并使用其四个布局之一,具体请查看 wrapper 布局

示例:

<template>
  <div>
    <div>
      <nly-button block @click="showSidebar" variant="info"
        >点击渲染左侧菜单栏</nly-button
      >
      <nly-button
        block
        v-nly-sidebar-collapse.sidebar-collapse
        class="navItem"
        :disabled="!show"
        bg-variant="pink"
        >点击收起左侧菜单栏</nly-button
      >
    </div>
    <nly-wrapper layout="fixed" v-if="show">
      <nly-sidebar-container hover style="margin-top:66px" side-mini>
        <nly-sidebar-brand to="#-">
          <nly-sidebar-brandimg
            src="http://nly-adminlte-vue-demo.nejinn.com/img/NLYLOGO.b43761e2.png"
            elevation
            circle
          />
          <nly-sidebar-brandtext>NLY Adminlte Vue</nly-sidebar-brandtext>
        </nly-sidebar-brand>

        <nly-sidebar>
          <nly-sidebar-userpanel class="mt-3 pb-3 mb-3 d-flex">
            <nly-sidebar-userpanel-img
              src="http://nly-adminlte-vue-demo.nejinn.com/img/NLYLOGO.b43761e2.png"
              class="SSS"
            />
            <nly-sidebar-userpanel-info to="#-"
              >Nejinn lerity</nly-sidebar-userpanel-info
            >
          </nly-sidebar-userpanel>
          <nly-sidebar-nav class="mt-2">
            <nly-sidebar-nav-header>仪表盘</nly-sidebar-nav-header>
            <nly-sidebar-nav-item
              to="/"
              icon="nav-icon fas nlyfont nly-icon-dashboard"
              exact
            >
              首页
              <nly-badge bg-variant="teal" badge-class="right">NEW</nly-badge>
            </nly-sidebar-nav-item>

            <nly-sidebar-nav-header>
              组件
              <nly-badge bg-variant="maroon" badge-class="float-sm-right"
                >15</nly-badge
              >
            </nly-sidebar-nav-header>

            <nly-sidebar-nav-tree
              target="components-one"
              visible
              icon="nav-icon fas nlyfont nly-icon-logo-polymer"
              text="菜单树"
            >
              <nly-sidebar-nav-item
                to="/"
                icon="nav-icon far nlyfont nly-icon-logo-chrome"
                exact
                >菜单1</nly-sidebar-nav-item
              >

              <nly-sidebar-nav-item
                to="/"
                icon="nav-icon far nlyfont nly-icon-nav-tool"
                exact
                >菜单2</nly-sidebar-nav-item
              >
            </nly-sidebar-nav-tree>

            <nly-sidebar-nav-tree
              target="components-two"
              icon="nav-icon fas nlyfont nly-icon-logo-polymer"
              text="菜单树2"
            >
              <nly-sidebar-nav-item
                to="/"
                icon="nav-icon far nlyfont nly-icon-sr-chanxueyanhezuo-fill"
                exact
                >菜单3</nly-sidebar-nav-item
              >
              <nly-sidebar-nav-tree
                target="components-three"
                accordion="components-three"
                icon="nav-icon fas nlyfont nly-icon-logo-polymer"
                text="菜单树3"
              >
                <nly-sidebar-nav-item
                  to="/"
                  icon="nav-icon far nlyfont nly-icon-sr-chanxueyanhezuo-fill"
                  exact
                  >菜单4</nly-sidebar-nav-item
                >
              </nly-sidebar-nav-tree>
              <nly-sidebar-nav-tree
                target="components-for"
                accordion="components-three"
                icon="nav-icon fas nlyfont nly-icon-logo-polymer"
                text="菜单树4"
              >
                <nly-sidebar-nav-item
                  to="/"
                  icon="nav-icon far nlyfont nly-icon-sr-chanxueyanhezuo-fill"
                  exact
                  >菜单5</nly-sidebar-nav-item
                >
              </nly-sidebar-nav-tree>
            </nly-sidebar-nav-tree>
          </nly-sidebar-nav>
        </nly-sidebar>
      </nly-sidebar-container>
      <nly-overlay v-nly-sidebar-collapse.overlay sidebar />
    </nly-wrapper>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        show: false
      };
    },
    methods: {
      showSidebar() {
        if (this.show) {
          this.show = false;
          // 写这个是为了这里文档演示效果,清除掉 body 的 class, 因为 NlyAdminlteVue 是用 body 来控制菜单栏的
          const bodyClassName = (document.body.className = "");
        } else {
          this.show = true;
        }
      }
    }
  };
</script>
<!-- sidebar.name -->
<!-- sidebar.vue -->

路由跳转

点击 nly-sidebar-nav-itemnly-sidebar-nav-tree 可以跳转到对应的路由。

设置 to prop 可以给组件传入对应的路由,可以是 String 或者 key=value Object。 比如 /sidebar 或者 {name: sidebar} 。 设置 to 的时候, 路由跳转是 router-link router.push()

设置 replacetrue 会使路由跳转变成 router-link router.replace()

设置 appendtrue 会把 to 指向的路由添加到当前路由后面,再进行跳转

设置 activetrue, 或使得nly-sidebar-nav-itemnly-sidebar-nav-tree 处于激活状态

设置 active-class 可以自定义路由激活状态的 css 类

设置 exacttrue 会开启路由匹配模式, 如果当前路由与 to 指向的路由是相同的,则会使得 nly-sidebar-nav-itemnly-sidebar-nav-tree 处于激活状态

设置 exact-active-class 可以自定义路由匹配激活状态的 css 类

手风琴模式

nly-sidebar-nav-tree 可以设置手风琴模式, prop accordion 可以用来控制手风琴分组。 默认值是 nly-sidebar-accordion。 如果不需要手风琴模式,请设置 accordionnull

如果需要给不同级别的 nly-sidebar-nav-tree 开启手风琴模式, 请给不同级别的 tree 设置不同的 accordion 值, 且给同一级别的 tree 设置 相同的 accordion 值。

target prop 是必传参数, 请保证 nly-sidebar-nav-treetarget 唯一, nly-sidebar-nav-tree 是通过 target 来控制对应元素收起展开的。 且 target 并没有设置默认值,多个相同,会导致一起展开收起。

nly-sidebar-nav-tree 中嵌入了一个 nly-link 组件, 关于 to, repalce, active 等 prop 跟 nly-link 用法是一样的, 具体请查看 nly-link

可以设置 visible prop 为 true 来使得 nly-sidebar-nav-tree 默认展开, 如果是手风琴模式, 请不要同时设置多个 visible prop 为 true,请保证只有 visible prop 为 true

可以设置 appear prop 来设置初始渲染动画

avtive prop 可以设置当前 nly-sidebar-nav-tree 的激活状态

非手风琴模式

如果不需要手风琴模式,请设置 accordionnull 或者为不同的值

<template>
  <div>
    <div>
      <nly-button block @click="showSidebar" variant="info"
        >点击渲染左侧菜单栏</nly-button
      >
      <nly-button
        block
        v-nly-sidebar-collapse.sidebar-collapse
        class="navItem"
        :disabled="!show"
        bg-variant="pink"
        >点击收起左侧菜单栏</nly-button
      >
    </div>
    <nly-wrapper layout="fixed" v-if="show">
      <nly-sidebar-container hover style="margin-top:66px" side-mini>
        <nly-sidebar-brand to="#-">
          <nly-sidebar-brandimg
            src="http://nly-adminlte-vue-demo.nejinn.com/img/NLYLOGO.b43761e2.png"
            elevation
            circle
          />
          <nly-sidebar-brandtext>NLY Adminlte Vue</nly-sidebar-brandtext>
        </nly-sidebar-brand>

        <nly-sidebar>
          <nly-sidebar-userpanel class="mt-3 pb-3 mb-3 d-flex">
            <nly-sidebar-userpanel-img
              src="http://nly-adminlte-vue-demo.nejinn.com/img/NLYLOGO.b43761e2.png"
              class="SSS"
            />
            <nly-sidebar-userpanel-info to="#-"
              >Nejinn lerity</nly-sidebar-userpanel-info
            >
          </nly-sidebar-userpanel>
          <nly-sidebar-nav class="mt-2">
            <nly-sidebar-nav-tree
              target="components-one"
              visible
              active
              accordion="components-one"
              appear
              icon="nav-icon fas nlyfont nly-icon-logo-polymer"
              text="非手风琴1"
            >
              <nly-sidebar-nav-item
                to="/"
                icon="nav-icon far nlyfont nly-icon-logo-chrome"
                exact
                >菜单1</nly-sidebar-nav-item
              >
            </nly-sidebar-nav-tree>
            <nly-sidebar-nav-tree
              target="components-two"
              accordion="components-two"
              appear
              icon="nav-icon fas nlyfont nly-icon-logo-polymer"
              text="非手风琴2"
            >
              <nly-sidebar-nav-item
                to="/"
                icon="nav-icon far nlyfont nly-icon-sr-chanxueyanhezuo-fill"
                exact
                >菜单5</nly-sidebar-nav-item
              >
            </nly-sidebar-nav-tree>
          </nly-sidebar-nav>
        </nly-sidebar>
      </nly-sidebar-container>
      <nly-overlay v-nly-sidebar-collapse.overlay sidebar />
    </nly-wrapper>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        show: false
      };
    },
    methods: {
      showSidebar() {
        if (this.show) {
          this.show = false;
          // 写这个是为了这里文档演示效果,清除掉 body 的 class, 因为 NlyAdminlteVue 是用 body 来控制菜单栏的
          const bodyClassName = (document.body.className = "");
        } else {
          this.show = true;
        }
      }
    }
  };
</script>
<!-- sidebar.name -->
<!-- sidebar.vue -->

手风琴模式

默认手风琴模式:

<template>
  <div>
    <div>
      <nly-button block @click="showSidebar" variant="info"
        >点击渲染左侧菜单栏</nly-button
      >
      <nly-button
        block
        v-nly-sidebar-collapse.sidebar-collapse
        class="navItem"
        :disabled="!show"
        bg-variant="pink"
        >点击收起左侧菜单栏</nly-button
      >
    </div>
    <nly-wrapper layout="fixed" v-if="show">
      <nly-sidebar-container hover style="margin-top:66px" side-mini>
        <nly-sidebar-brand to="#-">
          <nly-sidebar-brandimg
            src="http://nly-adminlte-vue-demo.nejinn.com/img/NLYLOGO.b43761e2.png"
            elevation
            circle
          />
          <nly-sidebar-brandtext>NLY Adminlte Vue</nly-sidebar-brandtext>
        </nly-sidebar-brand>

        <nly-sidebar>
          <nly-sidebar-userpanel class="mt-3 pb-3 mb-3 d-flex">
            <nly-sidebar-userpanel-img
              src="http://nly-adminlte-vue-demo.nejinn.com/img/NLYLOGO.b43761e2.png"
              class="SSS"
            />
            <nly-sidebar-userpanel-info to="#-"
              >Nejinn lerity</nly-sidebar-userpanel-info
            >
          </nly-sidebar-userpanel>
          <nly-sidebar-nav class="mt-2">
            <nly-sidebar-nav-tree
              target="components-one"
              visible
              active
              appear
              icon="nav-icon fas nlyfont nly-icon-logo-polymer"
              text="手风琴1"
            >
              <nly-sidebar-nav-item
                to="/"
                icon="nav-icon far nlyfont nly-icon-logo-chrome"
                exact
                >菜单1</nly-sidebar-nav-item
              >
            </nly-sidebar-nav-tree>
            <nly-sidebar-nav-tree
              target="components-two"
              appear
              icon="nav-icon fas nlyfont nly-icon-logo-polymer"
              text="手风琴2"
            >
              <nly-sidebar-nav-item
                to="/"
                icon="nav-icon far nlyfont nly-icon-sr-chanxueyanhezuo-fill"
                exact
                >菜单5</nly-sidebar-nav-item
              >
            </nly-sidebar-nav-tree>
          </nly-sidebar-nav>
        </nly-sidebar>
      </nly-sidebar-container>
      <nly-overlay v-nly-sidebar-collapse.overlay sidebar />
    </nly-wrapper>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        show: false
      };
    },
    methods: {
      showSidebar() {
        if (this.show) {
          this.show = false;
          // 写这个是为了这里文档演示效果,清除掉 body 的 class, 因为 NlyAdminlteVue 是用 body 来控制菜单栏的
          const bodyClassName = (document.body.className = "");
        } else {
          this.show = true;
        }
      }
    }
  };
</script>
<!-- sidebar.name -->
<!-- sidebar.vue -->

多级手风琴模式:

<template>
  <div>
    <div>
      <nly-button block @click="showSidebar" variant="info"
        >点击渲染左侧菜单栏</nly-button
      >
      <nly-button
        block
        v-nly-sidebar-collapse.sidebar-collapse
        class="navItem"
        :disabled="!show"
        bg-variant="pink"
        >点击收起左侧菜单栏</nly-button
      >
    </div>
    <nly-wrapper layout="fixed" v-if="show">
      <nly-sidebar-container hover style="margin-top:66px" side-mini>
        <nly-sidebar-brand to="#-">
          <nly-sidebar-brandimg
            src="http://nly-adminlte-vue-demo.nejinn.com/img/NLYLOGO.b43761e2.png"
            elevation
            circle
          />
          <nly-sidebar-brandtext>NLY Adminlte Vue</nly-sidebar-brandtext>
        </nly-sidebar-brand>

        <nly-sidebar>
          <nly-sidebar-userpanel class="mt-3 pb-3 mb-3 d-flex">
            <nly-sidebar-userpanel-img
              src="http://nly-adminlte-vue-demo.nejinn.com/img/NLYLOGO.b43761e2.png"
              class="SSS"
            />
            <nly-sidebar-userpanel-info to="#-"
              >Nejinn lerity</nly-sidebar-userpanel-info
            >
          </nly-sidebar-userpanel>
          <nly-sidebar-nav class="mt-2">
            <nly-sidebar-nav-tree
              target="components-one"
              visible
              active
              appear
              icon="nav-icon fas nlyfont nly-icon-logo-polymer"
              text="手风琴1"
            >
              <nly-sidebar-nav-item
                to="/"
                icon="nav-icon far nlyfont nly-icon-logo-chrome"
                exact
                >菜单1</nly-sidebar-nav-item
              >
            </nly-sidebar-nav-tree>
            <nly-sidebar-nav-tree
              target="components-two"
              appear
              icon="nav-icon fas nlyfont nly-icon-logo-polymer"
              text="手风琴2"
            >
              <nly-sidebar-nav-item
                to="/"
                icon="nav-icon far nlyfont nly-icon-sr-chanxueyanhezuo-fill"
                exact
                >菜单5</nly-sidebar-nav-item
              >
              <nly-sidebar-nav-tree
                target="components-three"
                appear
                accordion="level-2"
                icon="nav-icon fas nlyfont nly-icon-logo-polymer"
                text="手风琴3"
              >
                <nly-sidebar-nav-item
                  to="/"
                  icon="nav-icon far nlyfont nly-icon-sr-chanxueyanhezuo-fill"
                  exact
                  >菜单5</nly-sidebar-nav-item
                >
              </nly-sidebar-nav-tree>
              <nly-sidebar-nav-tree
                target="components-four"
                appear
                accordion="level-2"
                icon="nav-icon fas nlyfont nly-icon-logo-polymer"
                text="手风琴4"
              >
                <nly-sidebar-nav-item
                  to="/"
                  icon="nav-icon far nlyfont nly-icon-sr-chanxueyanhezuo-fill"
                  exact
                  >菜单5</nly-sidebar-nav-item
                >
              </nly-sidebar-nav-tree>
            </nly-sidebar-nav-tree>
          </nly-sidebar-nav>
        </nly-sidebar>
      </nly-sidebar-container>
      <nly-overlay v-nly-sidebar-collapse.overlay sidebar />
    </nly-wrapper>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        show: false
      };
    },
    methods: {
      showSidebar() {
        if (this.show) {
          this.show = false;
          // 写这个是为了这里文档演示效果,清除掉 body 的 class, 因为 NlyAdminlteVue 是用 body 来控制菜单栏的
          const bodyClassName = (document.body.className = "");
        } else {
          this.show = true;
        }
      }
    }
  };
</script>
<!-- sidebar.name -->
<!-- sidebar.vue -->

菜单标题

可以使用 nly-sidebar-nav-header 设置菜单 title 来给菜单进行分组

<template>
  <div>
    <div>
      <nly-button block @click="showSidebar" variant="info"
        >点击渲染左侧菜单栏</nly-button
      >
      <nly-button
        block
        v-nly-sidebar-collapse.sidebar-collapse
        class="navItem"
        :disabled="!show"
        bg-variant="pink"
        >点击收起左侧菜单栏</nly-button
      >
    </div>
    <nly-wrapper layout="fixed" v-if="show">
      <nly-sidebar-container hover style="margin-top:66px" side-mini>
        <nly-sidebar-brand to="#-">
          <nly-sidebar-brandimg
            src="http://nly-adminlte-vue-demo.nejinn.com/img/NLYLOGO.b43761e2.png"
            elevation
            circle
          />
          <nly-sidebar-brandtext>NLY Adminlte Vue</nly-sidebar-brandtext>
        </nly-sidebar-brand>

        <nly-sidebar>
          <nly-sidebar-userpanel class="mt-3 pb-3 mb-3 d-flex">
            <nly-sidebar-userpanel-img
              src="http://nly-adminlte-vue-demo.nejinn.com/img/NLYLOGO.b43761e2.png"
              class="SSS"
            />
            <nly-sidebar-userpanel-info to="#-"
              >Nejinn lerity</nly-sidebar-userpanel-info
            >
          </nly-sidebar-userpanel>
          <nly-sidebar-nav class="mt-2">
            <nly-sidebar-nav-header>分组0 </nly-sidebar-nav-header>
            <nly-sidebar-nav-item
              to="/"
              icon="nav-icon far nlyfont nly-icon-logo-chrome"
              exact
              >首页</nly-sidebar-nav-item
            >
            <nly-sidebar-nav-header>分组1 </nly-sidebar-nav-header>
            <nly-sidebar-nav-tree
              target="components-one"
              visible
              active
              appear
              icon="nav-icon fas nlyfont nly-icon-logo-polymer"
              text="分组1"
            >
              <nly-sidebar-nav-item
                to="/"
                icon="nav-icon far nlyfont nly-icon-logo-chrome"
                exact
                >菜单1</nly-sidebar-nav-item
              >
            </nly-sidebar-nav-tree>
            <nly-sidebar-nav-header>分组2 </nly-sidebar-nav-header>
            <nly-sidebar-nav-tree
              target="components-two"
              appear
              icon="nav-icon fas nlyfont nly-icon-logo-polymer"
              text="分组2"
            >
              <nly-sidebar-nav-item
                to="/"
                icon="nav-icon far nlyfont nly-icon-sr-chanxueyanhezuo-fill"
                exact
                >菜单5</nly-sidebar-nav-item
              >
            </nly-sidebar-nav-tree>
          </nly-sidebar-nav>
        </nly-sidebar>
      </nly-sidebar-container>
      <nly-overlay v-nly-sidebar-collapse.overlay sidebar />
    </nly-wrapper>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        show: false
      };
    },
    methods: {
      showSidebar() {
        if (this.show) {
          this.show = false;
          // 写这个是为了这里文档演示效果,清除掉 body 的 class, 因为 NlyAdminlteVue 是用 body 来控制菜单栏的
          const bodyClassName = (document.body.className = "");
        } else {
          this.show = true;
        }
      }
    }
  };
</script>
<!-- sidebar.name -->
<!-- sidebar.vue -->

数组渲染 sidebar

nly-sidebar-menu 是一个接受数组,渲染 sidebar 的组件。

sidebarList 是接收渲染数组的 prop。通常格式如下:

sidebarList: [
  {
    _type: "nly-sidebar-nav",
    _class: "mt-2",
    dataGroup: "zero",
    _key: "one",
    exact: true,
    _children: [
      {
        _type: "nly-sidebar-nav-item",
        _name: "一级菜单 item 1",
        icon: "nav-icon fas nlyfont nly-icon-dashboard",
        exact: true,
        exactActiveClass: "active",
        dataGroup: "one",
        _key: "two",
        to: { name: "SidebarMenuExact1" }
      },
      {
        _type: "nly-sidebar-nav-tree",
        target: "components-two",
        icon: "nav-icon fas nlyfont nly-icon-dashboard",
        text: "一级菜单 tree 1",
        dataGroup: "one",
        _key: "three",
        exact: true,
        _children: [
          {
            _type: "nly-sidebar-nav-item",
            _name: "二级菜单 item 1",
            icon: "nav-icon fas nlyfont nly-icon-logo-polymer",
            exact: true,
            exactActiveClass: "active",
            dataGroup: "three",
            _key: "five",
            to: { name: "SidebarMenuExact2" }
          }
        ]
      },
      {
        _type: "nly-sidebar-nav-tree",
        target: "components-three",
        icon: "nav-icon fas nlyfont nly-icon-dashboard",
        text: "一级菜单 tree 2",
        dataGroup: "one",
        _key: "four",
        exact: true,
        _children: [
          {
            _type: "nly-sidebar-nav-item",
            _name: "二级菜单 item 2",
            icon: "nav-icon fas nlyfont nly-icon-logo-polymer",
            exact: true,
            exactActiveClass: "active",
            to: { name: "SidebarMenuExact3" },
            dataGroup: "four",
            _key: "six"
          },
          {
            _type: "nly-sidebar-nav-item",
            _name: "二级菜单 item 3",
            icon: "nav-icon fas nlyfont nly-icon-logo-polymer",
            exact: true,
            exactActiveClass: "active",
            to: { name: "SidebarMenuExact4" },
            dataGroup: "four",
            _key: "seven"
          },
          {
            _type: "nly-sidebar-nav-tree",
            target: "components-four",
            accordion: "sss",
            icon: "nav-icon fas nlyfont nly-icon-logo-polymer",
            text: "二级菜单 tree 1",
            dataGroup: "four",
            _key: "eight",
            exact: true,
            _children: [
              {
                _type: "nly-sidebar-nav-item",
                _name: "三级菜单 item 1",
                icon: "nav-icon fas nlyfont nly-icon-logo-aperture",
                exact: true,
                exactActiveClass: "active",
                to: { name: "SidebarMenuExact5" },
                dataGroup: "eight",
                _key: "nine"
              }
            ]
          },
          {
            _type: "nly-sidebar-nav-tree",
            target: "components-five",
            accordion: "sss",
            icon: "nav-icon fas nlyfont nly-icon-logo-polymer",
            text: "二级菜单 tree 2",
            dataGroup: "four",
            _key: "ten",
            exact: true,
            _children: [
              {
                _type: "nly-sidebar-nav-item",
                _name: "三级菜单 item 2",
                icon: "nav-icon fas nlyfont nly-icon-logo-aperture",
                exact: true,
                exactActiveClass: "active",
                to: { name: "SidebarMenuExact6" },
                dataGroup: "ten",
                _key: "11"
              },
              {
                _type: "nly-sidebar-nav-tree",
                target: "components-six",
                accordion: "ssss",
                icon: "nav-icon fas nlyfont nly-icon-logo-aperture",
                text: "三级菜单 tree 1",
                dataGroup: "ten",
                _key: "12",
                exact: true,
                _children: [
                  {
                    _type: "nly-sidebar-nav-item",
                    _name: "四级菜单",
                    icon: "nav-icon fas nlyfont nly-icon-logo-pinterest",
                    exact: true,
                    exactActiveClass: "active",
                    to: { name: "SidebarMenuExact7" },
                    dataGroup: "12",
                    _key: "13"
                  }
                ]
              }
            ]
          }
        ]
      }
    ]
  }
];

sidebarList 支持的属性如下:

  • _type, 组件名称或者 html 标签字符串

  • _name, 插入到组件默认插槽的文本

  • attrs, attrs 属性

  • directives, 指令,但并不是所有的指令都支持,只支持 jsx 支持的指令

  • on, 函数事件

  • nativeOn, 原生函数事件

  • class, css 类名

  • style, 式样对象

  • domProps, dom 参数

  • scopedSlots, 作用于插槽

  • slot, 插槽

  • key, vue :key

  • ref, ref 属性

  • refInFor,

  • id, dom 的 id

  • prop name, 组件 prop, 比如上列中的 to prop, exact prop

其中 _typenly-sidebar-nav-tree 的时候额外支持属性:

  • dataGroup, 父组件的 vue :key

nly-sidebar-menu 支持全路由自动匹配激活模式, 配置该模式, nly-sidebar-nav-item 节点会自动激活,且此节点的父元素如果是 nly-sidebar-nav-tree 会自动激活且展开。

  • 开启自动匹配激活模式的时候, 需要给 nly-sidebar-nav-tree, nly-sidebar-nav-item 传入属性dataGroup

点击查看 demo, demo 代码如下:

<template>
  <nly-wrapper layout="fixed">
    <nly-wrapper-header style="height:57px">
      <nly-button v-nly-sidebar-collapse.sidebar-collapse>点击收起</nly-button>
    </nly-wrapper-header>
    <nly-sidebar-menu :sidebarList="sidebarList" side-mini exact />
    <router-view />
    <nly-wrapper-footer style="height:57px">footer</nly-wrapper-footer>
    <nly-overlay v-nly-sidebar-collapse.overlay sidebar />
  </nly-wrapper>
</template>

<script>
  export default {
    data() {
      return {
        sidebarList: [
          {
            _type: "nly-sidebar-nav",
            _class: "mt-2",
            dataGroup: "zero",
            _key: "one",
            exact: true,
            "child-indent": true,
            _children: [
              {
                _type: "nly-sidebar-nav-item",
                _name: "一级菜单 item 1",
                icon: "nav-icon fas nlyfont nly-icon-dashboard",
                exact: true,
                exactActiveClass: "active",
                dataGroup: "one",
                _key: "two",
                to: { name: "SidebarMenuExact1" }
              },
              {
                _type: "nly-sidebar-nav-tree",
                target: "components-two",
                icon: "nav-icon fas nlyfont nly-icon-dashboard",
                text: "一级菜单 tree 1",
                dataGroup: "one",
                _key: "three",
                exact: true,
                _children: [
                  {
                    _type: "template",
                    _slot: "linktool",
                    _children: [
                      {
                        _name: `1`,
                        _type: "nly-badge",
                        variant: "info",
                        badgeClass: "right"
                      }
                    ]
                  },
                  {
                    _type: "nly-sidebar-nav-item",
                    _name: "二级菜单 item 1",
                    icon: "nav-icon fas nlyfont nly-icon-logo-polymer",
                    exact: true,
                    exactActiveClass: "active",
                    dataGroup: "three",
                    _key: "five",
                    to: { name: "SidebarMenuExact2" }
                  }
                ]
              },
              {
                _type: "nly-sidebar-nav-tree",
                target: "components-three",
                icon: "nav-icon fas nlyfont nly-icon-dashboard",
                text: "一级菜单 tree 2",
                dataGroup: "one",
                _key: "four",
                exact: true,
                _children: [
                  {
                    _type: "nly-sidebar-nav-item",
                    _name: "二级菜单 item 2",
                    icon: "nav-icon fas nlyfont nly-icon-logo-polymer",
                    exact: true,
                    exactActiveClass: "active",
                    to: { name: "SidebarMenuExact3" },
                    dataGroup: "four",
                    _key: "six"
                  },
                  {
                    _type: "nly-sidebar-nav-item",
                    _name: "二级菜单 item 3",
                    icon: "nav-icon fas nlyfont nly-icon-logo-polymer",
                    exact: true,
                    exactActiveClass: "active",
                    to: { name: "SidebarMenuExact4" },
                    dataGroup: "four",
                    _key: "seven"
                  },
                  {
                    _type: "nly-sidebar-nav-tree",
                    target: "components-four",
                    accordion: "sss",
                    icon: "nav-icon fas nlyfont nly-icon-logo-polymer",
                    text: "二级菜单 tree 1",
                    dataGroup: "four",
                    _key: "eight",
                    exact: true,
                    _children: [
                      {
                        _type: "nly-sidebar-nav-item",
                        _name: "三级菜单 item 1",
                        icon: "nav-icon fas nlyfont nly-icon-logo-aperture",
                        exact: true,
                        exactActiveClass: "active",
                        to: { name: "SidebarMenuExact5" },
                        dataGroup: "eight",
                        _key: "nine"
                      }
                    ]
                  },
                  {
                    _type: "nly-sidebar-nav-tree",
                    target: "components-five",
                    accordion: "sss",
                    icon: "nav-icon fas nlyfont nly-icon-logo-polymer",
                    text: "二级菜单 tree 2",
                    dataGroup: "four",
                    _key: "ten",
                    exact: true,
                    _children: [
                      {
                        _type: "nly-sidebar-nav-item",
                        _name: "三级菜单 item 2",
                        icon: "nav-icon fas nlyfont nly-icon-logo-aperture",
                        exact: true,
                        exactActiveClass: "active",
                        to: { name: "SidebarMenuExact6" },
                        dataGroup: "ten",
                        _key: "oneone"
                      },
                      {
                        _type: "nly-sidebar-nav-tree",
                        target: "components-six",
                        accordion: "ssss",
                        icon: "nav-icon fas nlyfont nly-icon-logo-aperture",
                        text: "三级菜单 tree 1",
                        dataGroup: "ten",
                        _key: "onetwo",
                        exact: true,
                        _children: [
                          {
                            _type: "nly-sidebar-nav-item",
                            _name: "四级菜单",
                            icon:
                              "nav-icon fas nlyfont nly-icon-logo-pinterest",
                            exact: true,
                            exactActiveClass: "active",
                            to: { name: "SidebarMenuExact7" },
                            dataGroup: "onetwo",
                            _key: "onethree"
                          }
                        ]
                      }
                    ]
                  }
                ]
              }
            ]
          }
        ]
      };
    }
  };
</script>

组件参数

<nly-sidebar-menu>

v0.7.1+

props 参数

props (Click to sort Ascending)类型默认值描述
sidebar-list
Array[]导航栏数据数组, 可将数组直接渲染成导航栏, 具体请查看文档
exact
Booleanfalse开启左侧导航栏 自动匹配模式,如果当前路由导航栏元素跳转的路由匹配,会自动激活导航栏, 需要传入 prop sidebarList, 此模式为手风琴模式,请注意
side-mini
Booleanfalse给body添加sidebar-mini class属性,允许左侧导航栏收起为只有图标式样
container-variant
String'darkPrimary'container 颜色, 即左侧导航栏主题颜色
container-hover
Booleantrue航栏收起时,鼠标悬浮展开,设置为false则无悬浮效果
container-elevation
String'xl'阴影,可选,sm,md,lg,xl。依次增大
brand-size
String导航栏 brand 字体大小,可选sm,lg
brand-variant
String导航栏 brand 主题色,可选 primary,secondary,info,success,danger,indigo,purple,pink,navy,light,warning,lightblue,olive,lime,fuchsia,maroon,blue,orange,teal,white,gray,dark
brand-elevation
String导航栏 brand 阴影,可选,sm,md,lg,xl。依次增大
brand-href
Stringnull点击 brand 跳转的普通 url 地址
brand-rel
Stringnull设置导航栏 brand rel 属性
brand-target
String'_self'导航栏 brand 中 link 的 target 属性,可选_blank,_self,_parent,_top,framename
brand-active
Booleanfalse设置为 true, 导航栏 brand 处于激活状态
bran-disabled
Booleanfalse设置 true 导航栏 brand 处于禁用状态, 事件跳转都不会触发
brand-to
String or Objectnull点击 brand 跳转的页面, 可以是路由对象或者字符串。以router-link router.push()跳转
brand-append
Booleanfalse点击 brand 跳转的路由,router-link,需要使用 to 或者 href 这个 props,将需要跳转的url字符串添加到当前url的后面再跳转。设置 brand-append=true,比如当前http://localhost:8080/link,to='collapse',则会跳转到http://localhost:8080/link/collapse
brand-replace
Booleanfalserouter-link router.replace()跳转, 需要设置 to 或者 href
brand-event
String or Array'click'传递给 brand 的事件, 点击会触发事件
brand-active-class
Stringbrand 激活状态的 css 类
brand-router-tag
String'a'brand 的标签
brand-no-prefetch
Booleanfalsenuxt
brand-img-src
Stringbrand 图片地址, 如果没有传值, 不会渲染 brand
brand-img-class
Stringbrand 图片自定义 css 类
brand-img-alt
Stringbrand 图片 alt属性
brand-img-circle
Booleanfalse设置 true, brand 图片为圆形
brand-img-elevation
Booleanfalsebrand 图片 阴影,可选,sm,md,lg,xl。依次增大
brand-text-class
Stringnullbrand 文本自定义css
brand-text-tag
String'span'brand 文本标签
brand-text-weight
Booleantruebrand 文本字体加宽
brand-text
Stringnullbrand 文本
user-src
Stringuser 的图片, 如果不传入值,不会渲染 user-info 组件
user-circle
Booleantrue设置 true, user 的图片为圆形
user-elevation
String'md'user 的阴影
user-alt
Stringuser 的图片的 alt 属性
user-img-class
String用户图片的 自定义 css
info-class
Stringuser 文本自定义css
info-href
Stringnull点击 user-info 跳转的普通 url 地址
info-rel
Stringnull设置 user-info 的 ref 属性
info-target
String'_self'user-info 中 link 的 target 属性,可选_blank,_self,_parent,_top,framename
info-active
Booleanfalse设置为 true, 导航栏 user-info 处于激活状态
info-disabled
Booleanfalse设置 true 导航栏 user-info 处于禁用状态, 事件跳转都不会触发
info-to
String or Objectnull点击 user-info 跳转的页面, 可以是路由对象或者字符串。以router-link router.push()跳转
info-append
Booleanfalse点击 user-info 跳转的路由,router-link,需要使用 to 或者 href 这个 props,将需要跳转的url字符串添加到当前url的后面再跳转。设置 brand-append=true,比如当前http://localhost:8080/link,to='collapse',则会跳转到http://localhost:8080/link/collapse
info-replace
Booleanfalserouter-link router.replace()跳转, 需要设置 to 或者 href
info-event
String or Array'click'传递给 user-info 的事件, 点击会触发事件
info-active-class
Stringuser-info 激活状态的 css 类
info-router-tag
String'a'user-info 的标签
info-no-prefetch
Booleanfalsenuxt
info-text
Stringuser-info 的文本
scrollbar
Booleantrue导航栏是否开启内置滚动条

<nly-sidebar-container>

props 参数

props类型默认值描述
variant
String'darkPrimary'导航栏主题色, 可选 darkPrimary, darkWarning, darkInfo, darkDanger, darkSuccess, darkIndigo, darkLightblue, darkNavy, darkPurple, darkFuchsia, darkPink, darkMaroon, darkOrange, darkLime, darkTeal, darkOlive, lightPrimary,lightWarning, lightInfo,lightDanger,lightSuccess,lightIndigo,lightLightblue,lightNavy,lightPurple,lightFuchsia,lightPink,lightMaroon,lightOrange,lightLime,lightTeal,lightOlive
hover
Booleantrue导航栏收起时,鼠标悬浮展开,设置为false则无悬浮效果
elevation
String'xl'导航栏阴影,可选,sm,md,lg,xl。依次增大
side-mini
Booleanfalse给body添加sidebar-mini class属性,允许左侧导航栏收起为只有图标式样

props 参数

props (Click to sort Ascending)类型默认值描述
size
String字体大小,可选sm,lg
variant
String主题色,可选 primary,secondary,info,success,danger,indigo,purple,pink,navy,light,warning,lightblue,olive,lime,fuchsia,maroon,blue,orange,teal,white,gray,dark
elevation
String导航栏阴影,可选,sm,md,lg,xl。依次增大
href
Stringnull普通 url 地址
rel
Stringnull设置 rel 属性
target
String'_self'link 的 target 属性,可选_blank,_self,_parent,_top,framename
active
Booleanfalse设置 true 处于激活状态
disabled
Booleanfalse禁用,设置true为禁用状态
to
String or Objectnull点击跳转的页面, 可以是路由对象或者字符串,以router-link router.push()跳转
append
Booleanfalserouter-link,需要使用 to 或者 href 这个 props,将需要跳转的 url 字符串添加到当前 url 的后面再跳转。设置 append=true,比如当前 http://localhost:8080/link,to='collapse',则会跳转到 http://localhost:8080/link/collapse
replace
Booleanfalserouter-link router.replace()跳转
event
String or Array'click'点击事件,尽量不要和to以及href同时使用,如果同时使用,点击事件和跳转会依次发生
active-class
String激活状态css类名
exact
Booleanfalserouter-link,设置true开启路由匹配模式
exact-active-class
String'active'exact为true的情况下,当路由匹配成功,会激活exactActiveClass。类似active-class,是一个自定义css类
router-tag
String'a'router-link 标签,通常建议不修改
no-prefetch
Booleanfalsenuxt-link

<nly-sidebar-brand> 会生成支持 <router-link> 或者 <nuxt-link> 的组件 (如果您使用了 Nuxt.js). 查看更多关于 router link (或者 nuxt link) 支持的 props, 请跳转 Router support 文档

props 参数

props类型默认值描述
src
必传
String必填,img url
sidebar-brandimg-class
String自定义css式样
alt
Stringalt attr 属性
circle
Booleanfalse默认方形,设置true圆形
elevation
Booleanfalse阴影,默认无阴影,可选,sm,md,lg,xl。依次增大

props 参数

props类型默认值描述
text-class
Stringnull自定义 css 式样
tag
String'span'标签
weight
Booleantrue字体加宽

props 参数

props类型默认值描述
tag
String'li'标签

props 参数

props (Click to sort Ascending)类型默认值描述
link-class
String自定义 a 标签 css 式样
icon
String图标
href
Stringnull普通 url 地址
rel
Stringnull设置 rel 属性
target
String'_self'link 的 target 属性,可选_blank,_self,_parent,_top,framename
active
Booleanfalse设置 true 处于激活状态
disabled
Booleanfalse禁用,设置true为禁用状态
to
String or Objectnull点击跳转的页面, 可以是路由对象或者字符串,以router-link router.push()跳转
append
Booleanfalserouter-link,需要使用 to 或者 href 这个 props,将需要跳转的 url 字符串添加到当前 url 的后面再跳转。设置 append=true,比如当前 http://localhost:8080/link,to='collapse',则会跳转到 http://localhost:8080/link/collapse
replace
Booleanfalserouter-link router.replace()跳转
event
String or Array'click'点击事件,尽量不要和to以及href同时使用,如果同时使用,点击事件和跳转会依次发生
active-class
String激活状态css类名
exact
Booleanfalserouter-link,设置true开启路由匹配模式
exact-active-class
String'active'exact为true的情况下,当路由匹配成功,会激活exactActiveClass。类似active-class,是一个自定义css类
router-tag
String'a'router-link 标签,通常建议不修改
no-prefetch
Booleanfalsenuxt-link

<nly-sidebar-nav-item> 会生成支持 <router-link> 或者 <nuxt-link> 的组件 (如果您使用了 Nuxt.js). 查看更多关于 router link (或者 nuxt link) 支持的 props, 请跳转 Router support 文档

<nly-sidebar-nav-tree>

props 参数

props (Click to sort Ascending)类型默认值描述
label
String'nly sidebar navigation'aria-label 属性
target
必传
String需要控制收起的组件的 id, 请保证 target 唯一性,如果有相同的,会导致一起展开收起
link-class
Stringa 标签的自定义 css 式样
href
Stringnull普通 url 地址
link-target
String'_self'a 标签的 target 属性,可选 _blank,_self,_parent,_top,framename
active
Booleanfalse设置 true 处于激活状态
disabled
Booleanfalse禁用,设置true为禁用状态
to
String or Objectnull点击跳转的页面, 可以是路由对象或者字符串,以router-link router.push()跳转
append
Booleanfalserouter-link,需要使用 to 或者 href 这个 props,将需要跳转的 url 字符串添加到当前 url 的后面再跳转。设置 append=true,比如当前 http://localhost:8080/link,to='collapse',则会跳转到 http://localhost:8080/link/collapse
exact
Booleanfalserouter-link,设置true开启路由匹配模式
exact-active-class
Stringexact为true的情况下,当路由匹配成功,会激活exactActiveClass。类似active-class,是一个自定义css类
icon
String图标
accordion
String'nly-sidebar-accordion'手风琴分组, 如果需要分组手风琴,请给同一组的菜单设置相同的 accordion 值
visible
Booleanfalse展开状态, 设置 true 会展开菜单
tag
String'ul'标签
appear
Booleanfalse初始化动画,默认无, 设置 true 会渲染初始展开动画
menu-class
String下拉部分菜单自定义css式样,即ul标签自定义css class
text
String下拉菜单文本内容

<nly-sidebar-nav-tree> 会生成支持 <router-link> 或者 <nuxt-link> 的组件 (如果您使用了 Nuxt.js). 查看更多关于 router link (或者 nuxt link) 支持的 props, 请跳转 Router support 文档

Slots

Slot NameDescription
linktool 工具插槽, 如果需要使用微章等小挂件,请插入 linktool 插槽,插入的元素会浮动到 tree 的右侧

props 参数

props类型默认值描述
pill
Booleanfalse导航形状,圆角
flat
Booleanfalse导航形状,直角
legacy
Booleanfalse导航形状,左侧竖线
compact
Booleanfalse导航形状,压缩形状
child-indent
Booleanfalse子菜单缩进,默认与一级菜单齐平
size
Any文字大小,可选sm,lg
sidebar-nav-class
String自定义ul标签css式样
role
String'menu'role 属性

props 参数

props类型默认值描述
src
必传
Stringsrc标签的url
circle
Booleantrue默认方形,设置true圆形
elevation
String'md'阴影,可选,sm,md,lg,xl。其余依次增大
alt
Stringsrc的alt属性
img-class
String自定义 css

props 参数

props (Click to sort Ascending)类型默认值描述
info-class
String自定义 css
href
Stringnull普通 url 地址
rel
Stringnull设置 rel 属性
target
String'_self'link 的 target 属性,可选_blank,_self,_parent,_top,framename
active
Booleanfalse设置 true 处于激活状态
disabled
Booleanfalse禁用,设置true为禁用状态
to
String or Objectnull点击跳转的页面, 可以是路由对象或者字符串,以router-link router.push()跳转
append
Booleanfalserouter-link,需要使用 to 或者 href 这个 props,将需要跳转的 url 字符串添加到当前 url 的后面再跳转。设置 append=true,比如当前 http://localhost:8080/link,to='collapse',则会跳转到 http://localhost:8080/link/collapse
replace
Booleanfalserouter-link router.replace()跳转
event
String or Array'click'点击事件,尽量不要和to以及href同时使用,如果同时使用,点击事件和跳转会依次发生
active-class
String激活状态css类名
exact
Booleanfalserouter-link,设置true开启路由匹配模式
exact-active-class
String'active'exact为true的情况下,当路由匹配成功,会激活exactActiveClass。类似active-class,是一个自定义css类
router-tag
String'a'router-link 标签,通常建议不修改
no-prefetch
Booleanfalsenuxt-link

<nly-sidebar-userpanel-info> 会生成支持 <router-link> 或者 <nuxt-link> 的组件 (如果您使用了 Nuxt.js). 查看更多关于 router link (或者 nuxt link) 支持的 props, 请跳转 Router support 文档

<nly-sidebar>

props 参数

props类型默认值描述
scrollbar
Booleantrue设置 true 开启滚动条

单个组件导入

你可以从下表给出的导出路径和导出名称导入单个组件包

组件导出名称导出路径
<nly-sidebar-menu>NlySidebarMenunly-adminlte-vue
<nly-sidebar-container>NlySidebarContainernly-adminlte-vue
<nly-sidebar-brand>NlySidebarBrandnly-adminlte-vue
<nly-sidebar-brandimg>NlySidebarBrandimgnly-adminlte-vue
<nly-sidebar-brandtext>NlySidebarBrandtextnly-adminlte-vue
<nly-sidebar-nav-header>NlySidebarNavHeadernly-adminlte-vue
<nly-sidebar-nav-item>NlySidebarNavItemnly-adminlte-vue
<nly-sidebar-nav-tree>NlySidebarNavTreenly-adminlte-vue
<nly-sidebar-nav>NlySidebarNavnly-adminlte-vue
<nly-sidebar-userpanel-img>NlySidebarUserpanelImgnly-adminlte-vue
<nly-sidebar-userpanel-info>NlySidebarUserpanelInfonly-adminlte-vue
<nly-sidebar>NlySidebarnly-adminlte-vue

例子

import { NlySidebarMenu } from 'nly-adminlte-vue'
Vue.component('nly-sidebar-menu', NlySidebarMenu)

导出作为插件

导出的插件包括上表中列出的组件. 插件同样包含上表中所有组件的简称.

导出名称导出路径
SidebarPluginnly-adminlte-vue

例子

import { SidebarPlugin } from 'nly-adminlte-vue'
Vue.use(SidebarPlugin)