Codeages Design Vue
a Web Design Language Based on the Vue and Element version
How to use ?
about element component, the same use method as element.
;;; Vue;Vue;
If you want to On-demand use?
yarn add babel-plugin-import --dev
Then edit .babelrc:
"plugins": [
["import", {
"libraryName": "cd-element",
"libraryDirectory": "src/components"
}]
],
Then edit main.js
; Vue;Vue;Vue;Vue;
About cd-element API
Menu
一级menu
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
isCollapse | 是否折叠 | Boolean | -- | -- |
currentRouteName | 当前路由 | String | -- | -- |
data | 菜单配置项(包含一下三项) | Array | -- | [] |
title | 菜单标题 | String | -- | -- |
icon | 菜单图标 | String | -- | -- |
routeName | 菜单对应路由 | String | -- | -- |
二级 submenu
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
data | 菜单配置项(包含一下三项) | Array | -- | [] |
title | 菜单标题 | String | -- | -- |
icon | 菜单图标 | String | -- | -- |
routeName | 菜单对应路由 | String | -- | -- |
sidebar 侧边栏组件
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
isCollapse | 是否折叠 | Boolean | -- | -- |
title | 侧边栏标题 | String | -- | -- |
panel 面板
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
title | 面板标题 | String | -- | -- |
size | 面板大小 | String | sm, '' | '' |
isShowHeading | 是否展示heading | Boolean | -- | true |
isShowAction | 是否展示操作 | Boolean | -- | false |