1.1.0 • Published 1 year ago
dk-vue2-ui v1.1.0
使用
直接执行安装命令:
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>