color-view-plus v1.0.1

ColorViewPlus

ColorViewPlus是基于ColorView的扩展组件库，增加了后台管理页面的基本框架，样式由class指定或通过外部配置定义，可以完全自定义样式。

组件

页面框架cvp-frame

内容

• content：框架内容，默认使用cvp-logo、cvp-header、cvp-nav和cvp-body填充。
• logoContent：logo部分内容。
• headerContent：header部分内容。
• navContent：nav部分内容。
• bodyContent：body部分内容。

<cvp-frame>[content]</cvp-frame>
<cvp-frame>
    <template #logo>
        [logoContent]
    </template>
    <template #header>
        [headerContent]
    </template>
    <template #nav>
        [navContent]
    </template>
    <template #body>
        [bodyContent]
    </template>
</cvp-frame>

外观

• type: frame
• color: primary
• size: medium

<cv-frame class="[type] [color] [size]"></cv-frame>

绑定

• logo：页面logo，详见cvp-logo部分。
• menu：页面菜单配置，详见cvp-nav部分。

<cv-frame :logo="logo" :menu="menu"></cv-frame>

页面Logocvp-logo

内容

• content：框架Logo，默认使用logo属性绑定的内容。

<cvp-logo>[content]</cvp-logo>

外观

• type: logo
• color: primary
• size: medium

<cv-logo class="[type] [color] [size]"></cv-logo>

绑定

• logo：logo为字符串或图片，图片可使用require引入。

<cv-logo :logo="logo"></cv-logo>

页面头部cvp-header

内容

• content：框架头部，默认使用cvp-user组件。

<cvp-header>[content]</cvp-header>

外观

• type: header
• color: primary
• size: medium

<cv-header class="[type] [color] [size]"></cv-header>

页面导航cvp-nav

外观

• type: nav
• color: primary
• size: medium

<cv-nav class="[type] [color] [size]"></cv-nav>

绑定

• menu：菜单配置，使用形如{meta: {icon, name, path}, chindren: [...]}结构。

<cv-nav :menu="menu"></cv-nav>

页面主体cvp-body

外观

• type: body
• color: primary
• size: medium

<cv-body class="[type] [color] [size]"></cv-body>

用户组件cvp-user

外观

• type: user
• color: primary
• size: medium

<cv-user class="[type] [color] [size]"></cv-user>

绑定

• $root.user：在root组件下，需要拥有名为user、行为{meta: {username, avatar}, operations: [{label, click: function, operations: [...]}]}的数据。

页面cvp-page

内容

• content：页面内容。

<cvp-page>[content]</cvp-page>

外观

• type: page
• color: primary
• size: medium

<cv-page class="[type] [color] [size]"></cv-page>

页面cvp-page-header

内容

• content：页面顶部按钮。

<cvp-page-header>[content]</cvp-page-header>

外观

• type: page-header
• color: primary
• size: medium

<cv-page-header class="[type] [color] [size]"></cv-page-header>

绑定

• title：页面标题。

<cv-page-header :title="title"></cv-page-header>

页面cvp-page-data

内容

• content：页面数据列配置，需要传入cv-table-column组件。

<cvp-page-data>[content]</cvp-page-data>

外观

• type: page-data
• color: primary
• size: medium

<cv-page-data class="[type] [color] [size]"></cv-page-data>

绑定

• data：Array，页面数据，参考cv-table组件。
• page：分页数据，参考cv-pagination组件。

<cv-page-data :data="data" :page="page"></cv-page-data>

事件

• page：页面跳转，事件对象为page对象。

<cv-button @page="search($event)"></cv-button>