在ElementUI下使用的组件

Menus

在el-menu的基础上，封装成，传入menus参数，根据对象生成元素；el-menu的props参数适用于menus

<template>
    <menus :menus="menus"></menus>
</template>
<script>
export default {
    data(){
        return {
            menus: [
                {
                    icon: "el-icon-message",
                    title: "导航一",
                    submenus: [
                        {
                            title: "分组一",
                            group: [
                                {
                                    title: "选项1",
                                    index: "/shell/path1"
                                },
                                {
                                    title: "选项2",
                                    index: "/shell/path2"
                                }
                            ]
                        },
                        {
                            title: "分组二",
                            group: [
                                {
                                    title: "选项3",
                                    index: "/shell/path3"
                                },
                                {
                                    title: "选项4",
                                    index: "/shell/path4"
                                }
                            ]
                        },
                        {
                            title: "子菜单",
                            submenus: [
                                {
                                    title: "选项5",
                                    index: "/shell/path5"
                                },
                                {
                                    title: "选项6",
                                    index: "/shell/path6"
                                }
                            ]
                        }
                    ]
                },
                {
                    icon: "el-icon-menu",
                    title: "表格",
                    index: "/shell/table"
                },
                {
                    icon: "el-icon-setting",
                    title: "设置",
                    index: "/shell/setting"
                },
                {
                    icon: "fa fa-bar-chart",
                    title: "图表",
                    index: "/shell/chart"
                }
            ]
        }
    }
}
</script>

Attributes

|参数|说明|类型|可选值|默认值| |---|---|---|---|---| |menus|菜单数组|Array|-|-| |mode|模式|String|horizontal,vertical|vertical| |collapse|是否水平折叠收起菜单（仅在 mode 为 vertical 时可用）|boolean|-|false| |default-active|当前激活菜单的 index|string|-|-| |default-openeds|当前打开的submenu的 key 数组|Array|-|-| |unique-opened|是否只保持一个子菜单的展开|boolean|-|false| |menu-trigger|子菜单打开的触发方式(只在 mode 为 horizontal 时有效)|string|-|hover| |router|是否使用 vue-router 的模式，启用该模式会在激活导航时以 index 作为 path 进行路由跳转|boolean|-|false|

Menus Events

|事件名称|说明|回调参数| |---|---|---| |select|菜单激活回调|index: 选中菜单项的 indexObject: 选中菜单项的对象| |open|SubMenu 展开的回调|index: 打开的 subMenu 的 index， indexObject: 打开的 subMenu 的菜单项的对象| |close|SubMenu 关闭的回调|index: 关闭的 subMenu 的 index， indexObject: 关闭的 subMenu 的菜单项的对象

Menus Methods

|方法名称|说明|参数| |---|---|---| |open|展开指定的 sub-menu|index: 需要打开的 sub-menu 的 index| |close|收起指定的 sub-menu|index: 需要收起的 sub-menu 的 index|

Layout

经典top|left|bottom|right|center五格布局

<template>
    <layout layout="fill_parent">
        <layout-item slot="top">top</layout-item>
        <layout-item slot="left">left</layout-item>
        <layout-item slot="center" :primary="true">center</layout-item>
        <layout-item slot="bottom">bottom</layout-item>
        <layout-item slot="right">right</layout-item>
    </layout>
</template>
<script>
export default {
    data(){
        retutn {}
    }
}
</script>

Layout Attributes

|参数|说明|类型|可选值|默认值| |---|---|---|---|---| |layout|填充类型|String|wrap_content / fill_parent / full_screen|wrap_content|

LayoutItem Attributes

|参数|说明|类型|可选值|默认值| |---|---|---|---|---| |primary|是否填充剩余空间|Boolean|true / false|false|

Layout Slot

|name|说明| |---|---| |top|显示在顶部| |right|显示在右侧| |bottom|显示在底部| |left|显示在左侧| |center|显示在中央|

SY-Address

行政区划下拉选择，行政区划数据地址https://sisp.servyou.com.cn/apiweb/sisp/1/xzqh/getXzqhFile?code=

<sy-address v-model="code"></sy-address>

sy-address Attributes

|参数|说明|类型|可选值|默认值| |---|---|---|---|---| |width|宽度|number|-|-| |placeholder|-|string|-|-| |disabled|-|boolean|-|false| |prefix-icon|-|string|-|-| |suffix-icon|-|string|-|-| |autosize|是否可以调整大小|boolean|-|false| |name|input的name属性|string|-|-| |label|标题|string|-|-|