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.

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);

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