Arbor 前端框架4.2 面板使用文档

# 卡片

# 1.新增组件于src/components/frame/Panel/BlockContent/items/PCard/items目录下

如需自定义展示内容，可在上方对应目录路径下新建xxx.vue组件，命名格式为P+编码的形式最佳

例如此处示例新增编码为'test-card'，则可新增组件命名为PTestCard.vue，可在此组件自定义内容

# 2.修改src/components/frame/Panel/BlockContent/items/PCard/index.vue

在上述目录文件中引入并注册新增组件

// 实际路径以实际为准，此处示例对应路径为"./items/PTestCard.vue"
import PTestCard from "./items/PTestCard.vue";
export default {
    components: {
        PTestCard
    }
}

# 3.块图表配置中直接使用

完成上述步骤可直接在块配置时直接使用

card-expend1

# 示例json

{
	"cardInfo": {
		"cardName": "PTestCard",
		"width": "50%",
		"height": "150px"
	}
}

# cardInfo

配置卡片信息对象

# cardName

对应上述步骤新增组件名生效，此处不是组件路径，而是组件名

card-expend2

PTestCard.vue无其他内容，仅html中有一行文字，把文件内容粘贴如下，方便后续对比效果图

<template>
    <div>test-card</div>
</template>

# 效果图

card-expend3

如上图所示，效果图与PTestCard.vue内容吻合，此时可知卡片扩展是成功的

注：如无卡片配置，则默认使用src/components/frame/Panel/BlockContent/items/PCard/items/DefaultCard.vue内容

← 地图 →