aside

基础用法

ykc-aside 的基础用法。

运维工单

提单方管理

有默认值

当前位于：

运维工单

提单方管理

无默认值

当前位于：

<template>
  <div class="ykc-aside-demo">
    <ykc-aside
      :data="menuData"
      accordion
      toggleable
      defaultActiveMenuId="16"
      @menu-item-click="handleMenuItemClick"></ykc-aside>
    <div class="breadcrumb">
      <h3>有默认值</h3>
      <h3>当前位于：{{ breadcrumb }}</h3>
    </div>
    <ykc-aside
      class="aside-without-default"
      :data="menuData"
      @menu-item-click="handleMenuItemClickWithoutDefault"></ykc-aside>
    <div class="breadcrumb-without-default">
      <h3>无默认值</h3>
      <h3>当前位于：{{ breadcrumbWithoutDefault }}</h3>
    </div>
  </div>
</template>

<script>
  export default {
    mounted() {
      this.target = window.document.documentElement;
    },
    data() {
      return {
        target: null,
        menuData: [{
          icon: 'checked',
          id: '1',
          funPath: null,
          interfacePath: '',
          funButtonCode: '',
          name: '运维工单',
          funType: '1',
          sort: '1',
          parentId: '0',
          ykcUseFlag: '1',
          companyUseFlag: '1',
          subNodes: [
            {
              id: '7',
              funPath: null,
              interfacePath: '',
              funButtonCode: '',
              name: '工单管理',
              funType: '1',
              sort: '1',
              parentId: '1',
              ykcUseFlag: '1',
              companyUseFlag: '1',
              subNodes: [
                {
                  id: '34',
                  funPath: 'WorkOrderList',
                  interfacePath: '',
                  funButtonCode: '',
                  name: '工单列表',
                  funType: '1',
                  sort: '1',
                  parentId: '7',
                  ykcUseFlag: '1',
                  companyUseFlag: '0',
                  subNodes: null,
                },
              ],
            },
            {
              id: '8',
              funPath: null,
              interfacePath: '',
              funButtonCode: '',
              name: '工单配置',
              funType: '1',
              sort: '2',
              parentId: '1',
              ykcUseFlag: '1',
              companyUseFlag: '0',
              subNodes: [
                {
                  id: '9',
                  funPath: 'ServiceItemConfigList',
                  interfacePath: '',
                  funButtonCode: '',
                  name: '服务项列表',
                  funType: '1',
                  sort: '1',
                  parentId: '8',
                  ykcUseFlag: '1',
                  companyUseFlag: '0',
                  subNodes: null,
                },
                {
                  id: '10',
                  funPath: 'ServiceSchemeConfigList',
                  interfacePath: '',
                  funButtonCode: '',
                  name: '服务方案配置',
                  funType: '1',
                  sort: '2',
                  parentId: '8',
                  ykcUseFlag: '1',
                  companyUseFlag: '0',
                  subNodes: null,
                },
                {
                  id: '11',
                  funPath: 'CommissionConfig',
                  interfacePath: '',
                  funButtonCode: '',
                  name: '抽成比例配置',
                  funType: '1',
                  sort: '3',
                  parentId: '8',
                  ykcUseFlag: '1',
                  companyUseFlag: '0',
                  subNodes: null,
                },
              ],
            },
          ],
        },
        {
          id: '2',
          funPath: null,
          interfacePath: '',
          funButtonCode: '',
          name: '提单方管理',
          funType: '1',
          sort: '2',
          parentId: '0',
          ykcUseFlag: '1',
          companyUseFlag: '0',
          subNodes: [
            {
              id: '12',
              funPath: null,
              interfacePath: '',
              funButtonCode: '',
              name: '公司管理',
              funType: '1',
              sort: '1',
              parentId: '2',
              ykcUseFlag: '1',
              companyUseFlag: '0',
              subNodes: [
                {
                  id: '14',
                  funPath: 'CompaniesOutsideSystemList',
                  interfacePath: '',
                  funButtonCode: '',
                  name: '体系外公司',
                  funType: '1',
                  sort: '1',
                  parentId: '12',
                  ykcUseFlag: '1',
                  companyUseFlag: '0',
                  subNodes: null,
                },
                {
                  id: '15',
                  funPath: 'CompaniesInTheSystemList',
                  interfacePath: '',
                  funButtonCode: '',
                  name: '体系内公司',
                  funType: '1',
                  sort: '2',
                  parentId: '12',
                  ykcUseFlag: '1',
                  companyUseFlag: '0',
                  subNodes: null,
                },
              ],
            },
            {
              id: '13',
              funPath: null,
              interfacePath: '',
              funButtonCode: '',
              name: '帐号管理',
              funType: '1',
              sort: '2',
              parentId: '2',
              ykcUseFlag: '1',
              companyUseFlag: '0',
              subNodes: [
                {
                  id: '16',
                  funPath: 'CompanyMasterCccountList',
                  interfacePath: '',
                  funButtonCode: '',
                  name: '公司主账号',
                  funType: '1',
                  sort: '1',
                  parentId: '13',
                  ykcUseFlag: '1',
                  companyUseFlag: '0',
                  subNodes: null,
                },
              ],
            },
          ],
        },],
        breadcrumb: '',
        breadcrumbWithoutDefault: '',
      };
    },
    methods: {
      handleMenuItemClick(menus) {
        this.breadcrumb = menus.map(item => item.name).join('/');
      },
      handleMenuItemClickWithoutDefault(menus) {
        this.breadcrumbWithoutDefault = menus.map(item => item.name).join('/');
      },
    },
  };
</script>
<style>
  .ykc-aside-demo {
    position: relative;
    height: 500px;
  }
  .aside-without-default {
    position: absolute !important;
    left: 600px;
    top: 0;
  }
  .breadcrumb {
    position: absolute;
    top: 30px;
    left: 100px;
    color: var(--theme-color-primary);
  }
  .breadcrumb-without-default {
    position: absolute;
    top: 30px;
    left: 700px;
    color: var(--theme-color-primary);
  }
</style>

显示代码 复制代码 复制代码

Attributes

参数	必填	说明	类型	可选值	默认值
data	否	菜单数据	array	无	[]
default-active-menu-id	否	默认激活的叶子节点的id	string 或 number	无	''
z-index	否	子菜单弹出层的 z-index	number	无	5000
indents	否	子菜单弹出层不同层级的缩进	array	无	[16, 32, 64]
keep-expand-state	否	是否保留用户操作后的展开和折叠状态	boolean	true 或 false	false
accordion	否	子菜单是否是手风琴模式	boolean	true 或 false	false
toggleable	否	根菜单激活时，再次点击是否切换子菜单弹出状态	boolean	true 或 false	false
children-prop	否	子元素属性标识	string	无	subNodes
id-prop	否	元素Id属性标识	string	无	id
parent-id-prop	否	父元素Id属性标识	string	无	parentId
icon-prop	否	根元素Icon属性标识	string	无	icon
trigger	否	触发子菜单关闭的事件	string	click 或 hover	click

Events

事件名称	说明	回调参数
menu-item-click	激活叶子菜单	该叶子菜单到根菜单的数组，根菜单在前