[TOC]

• 使用
• 组件
  • 头部组件
  • 头部卡片

使用

直接执行安装命令：

npm i dk-vue2-ui

然后在main.js引用注册，代码如下：

import DkVue2Ui from 'dk-vue2-ui'
import '../node_modules/dk-vue2-ui/dk-vue2-ui.css'
Vue.use(DkVue2Ui)

这里单独引用了css，就和element-ui一样需要单独引入样式文件。

直接使用组件dk-header，代码如下：

<template>
  <div id="app">
    <dk-header
      width="100%"
      title="德康头部"
      height="100%"
      :bgPic="bgpic"
    ></dk-header>
  </div>
</template>

组件

头部组件

/**
 * @param {String} width
 * @param {String} bgPic
 * @param {String} height
 * @param {String} title
 * @param {String} cardType 这个值必须匹配下列字符串中的一个["main", "sub"]
 */

<dk-header
    width="100%"
    title="德康头部"
    height="100%"
    :bgPic="bgpic"
></dk-header>

头部卡片

/**
 * @param {String} data 
 *  title: {
        left: {
        label: "报早餐人数",
        value: 300,
        },
        right: {
        label: "差异",
        value: 300,
        },
    },
    body: {},
    foot: {},
 * @param {String} bgc  背景颜色
 */

<dk-top-card
:data="breakfastData"
bgc="linear-gradient(226deg, #00C59F 0%, #009366 100%)"
></dk-top-card>