Element-ui-plugin NPM

在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	-	-