@hz_yujin/vue2-base-card
基于 Vue 2.6 / 2.7 + Element UI el-card 的通用内容卡片。
- 只做容器：标题 / 副标题、
extra 工具区、刷新、全屏（Esc 退出）、loading、空状态
- 不绑定任何图表库：ECharts、表格、指标、描述列表等任意内容都通过默认插槽自行管理
- 未声明的属性（如
body-style）通过 $attrs 透传给 el-card
安装
npm install @hz_yujin/vue2-base-card element-ui
注册
import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import Vue2BaseCard from '@hz_yujin/vue2-base-card'
import '@hz_yujin/vue2-base-card/style.css'
Vue.use(ElementUI)
Vue.use(Vue2BaseCard)
// 可选：Vue.use(Vue2BaseCard, { prefix: 'Hz' })
基础用法
<template>
<ProCard title="卡片标题" subtitle="副标题描述" @refresh="loadData">
<p>任意内容：表格、图表、指标、表单……</p>
</ProCard>
</template>
放 ECharts（图表生命周期由业务自管）
<template>
<ProCard title="访问趋势" :loading="loading" :empty="!list.length" @refresh="loadData">
<div ref="chart" style="width: 100%; height: 320px"></div>
</ProCard>
</template>
<script>
import * as echarts from 'echarts'
export default {
data() {
return { loading: false, list: [], chart: null }
},
mounted() {
this.chart = echarts.init(this.$refs.chart)
window.addEventListener('resize', this.resize)
this.loadData()
},
beforeDestroy() {
window.removeEventListener('resize', this.resize)
this.chart.dispose()
},
methods: {
resize() {
this.chart.resize()
},
loadData() {
this.loading = true
// 请求结束后 this.chart.setOption(option)；全屏切换后可监听 fullscreen-change 再 resize
},
},
}
</script>
Props
| Prop |
类型 |
默认 |
说明 |
title |
String |
'' |
卡片标题 |
subtitle |
String |
'' |
标题旁的副标题 |
shadow |
String |
'hover' |
el-card 阴影：always / hover / never |
loading |
Boolean |
false |
主体加载遮罩（el-loading） |
empty |
Boolean |
false |
显示空数据占位（插槽内容保留，仅遮罩覆盖） |
emptyText |
String |
'暂无数据' |
空状态文案 |
refreshable |
Boolean |
true |
显示刷新按钮 |
fullscreenable |
Boolean |
true |
显示全屏按钮（Esc 退出） |
customClass |
String |
'' |
根节点额外 class |
width |
String / Number |
'' |
卡片宽度（数字按 px，字符串直接作为 CSS 值） |
height |
String / Number |
'' |
卡片高度（数字按 px；设置后内容区超出可滚动） |
未列出的属性透传给 el-card（如 body-style）。
Slots
| 插槽 |
说明 |
title |
自定义标题区域（覆盖 title） |
extra |
头部右侧区域（覆盖默认刷新/全屏按钮） |
| 默认 |
卡片主体内容 |
empty |
空状态自定义内容（覆盖默认 el-empty，需配合 empty prop 使用） |
footer |
主体下方的底部区域 |
Events
| 事件 |
参数 |
说明 |
refresh |
— |
点击刷新按钮 |
fullscreen-change |
(visible) |
全屏状态变化（可在此触发图表 resize） |
fullscreen |
— |
进入全屏后（DOM 更新完成） |
exit-fullscreen |
— |
退出全屏后（DOM 更新完成） |
实例方法（通过 ref）
| 方法 |
说明 |
enterFullscreen() |
进入全屏 |
exitFullscreen() |
退出全屏 |
toggleFullscreen() |
切换全屏 |
样式变量
可在业务侧覆盖：
:root {
--pro-card-border: #ebeef5;
--pro-card-bg: #ffffff;
--pro-card-header-bg: #ffffff;
--pro-card-radius: 8px;
--pro-card-title-color: #303133;
--pro-card-subtitle-color: #909399;
--pro-card-primary: #409eff;
--pro-card-zindex: 2000;
}
Vue CLI 3 / webpack 4
若构建报错解析现代语法，请将本包加入 transpileDependencies：
transpileDependencies: ['@hz_yujin/vue2-base-card']