a Web Design Language Based on the Vue and Element version
about element component, the same use method as element.
import ElementUI from 'element-ui';
import cdElement from 'cd-element';
import 'cd-element/dist/styles/index.css';
Vue.use(cdElement);
Vue.use(ElementUI);
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
import {
VMenu,
VSubmenu,
Sidebar,
Panel
} from 'cd-element';
Vue.component('cd-v-menu', VMenu);
Vue.component('cd-v-submenu', VSubmenu);
Vue.component('cd-sidebar', Sidebar);
Vue.component('cd-panel', Panel);
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
isCollapse | 是否折叠 | Boolean | -- | -- |
currentRouteName | 当前路由 | String | -- | -- |
data | 菜单配置项(包含一下三项) | Array | -- | [] |
title | 菜单标题 | String | -- | -- |
icon | 菜单图标 | String | -- | -- |
routeName | 菜单对应路由 | String | -- | -- |
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
data | 菜单配置项(包含一下三项) | Array | -- | [] |
title | 菜单标题 | String | -- | -- |
icon | 菜单图标 | String | -- | -- |
routeName | 菜单对应路由 | String | -- | -- |
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
isCollapse | 是否折叠 | Boolean | -- | -- |
title | 侧边栏标题 | String | -- | -- |
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
title | 面板标题 | String | -- | -- |
size | 面板大小 | String | sm, '' | '' |
isShowHeading | 是否展示heading | Boolean | -- | true |
isShowAction | 是否展示操作 | Boolean | -- | false |