普通功能组件
任何非Echarts图表的组件，都可定义为普通功能组件，例如：按钮、表单、图片、表格、视频、音频、图形等等。
组件遮罩层
<div v-if="shade" class="shade"></div>
我们可以给组件添加遮罩层用于在设计器中拖拽布局时显示，防止组件在设计器中编排布局时，点击触发到组件内部的功能，遮罩层不是必须的，但建议大部分组件都配置遮罩层，默认一键生成的组件中，都会自带此遮罩层代码块，遮罩层只会在设计阶段时显示，预览和已发布状态下，遮罩层是不会加载渲染的。
Mixins->FuncCompMixin
所有组件（普通功能组件、Echarts图表组件、Echarts3D图表组件）默认都会混入FuncCompMixin，这是必须的，FuncCompMixin包含了组件的一些通用属性和函数。
配置属性
在组件基本介绍中，已经简单说明了组件的配置属性的作用，那么组件的配置属性可以为任意的JS数据类型（字符、布尔、数值、对象、数组...）
配置属性的读写
在组件的主文件内部，要读写组件的配置属性，都必须通过component.compConfigData语法形式进行读写，component属性定义在FuncCompMixin中，内部存储了当前组件的所有配置信息（id、name、version、配置属性）需要注意的是，component是被定义为一个Vue计算属性，它并不代表当前组件的实例对象，component属性包含的信息如下图所示（此图中以ClockComp组件为例）
在组件的中，通过如下语法获取配置属性值：
{{component.compConfigData.[配置属性名]}}
在组件的脚本中，通过如下语法获取配置属性值：
this.component.compConfigData.[配置属性名]
在组件的主文件JS脚本中，我们也可以通过如下语法糖来修改配置属性，某些情况下我们的确是会需要这么做的：
this.component.compConfigData.[配置属性名] = [任意数据]
注意
之前我们提到过，配置属性定义在组件attr的configDataTemp中，configDataTemp决定的是组件初始该有哪些配置属性，而组件内部读取配置属性时是不能够通过this.component.configDataTemp.这样的方式去读写配置属性的，这个需要特别注意！
动态数据源配置属性
在组件配置属性定义阶段，我们需要明确我们当前开发的组件是否可以配置数据源（包括静态数据源和多种动态数据源），如果组件只是用于显示某一个文本，或者是显示一个图形样式，且这些内容都是固定不变的，反之，如果组件是一个表格或者一段动态文本（表格或文本内容需要从API中或数据库中读取），那么就需要给组件的配置属性定义动态数据源配置属性。
在PageNow中，我们封装了一个组件应该有哪些动态数据源配置属性，这些属性封装在PnDesigner工具类的buildFuncCompDatasourceField函数中，如下所示：
/**
* 构建 功能组件数据源相关字段对象
* @param customObj 自定义合并对象（同名字段会覆盖原有字段）
*/
const buildFuncCompDatasourceField = function (customObj = {}) {
let dsFieldObj = {
ds_type: 'static',
ds_apiPath: '',
ds_apiMethod: 'GET',
ds_apiHeaders: {},
ds_apiPostData: {},
ds_wsPath: '',
ds_database: '',
ds_sql: 'select * from ',
ds_shareDatasourceKey: '', // 对应共享数据源
ds_csvDatasourceName: '', // CSV数据源名称
ds_resultObjTemplate: [
],
ds_resultObj: [
],
ds_useFilter: false, // 是否使用过滤器
ds_filterCode: '',
ds_linkageUrlParams: [],
ds_useTimer: false, // 是否使用定时器
ds_autoRefresh: false, // 是否开启定时器自动刷新
ds_autoRefreshDuration: 5,
ds_useHttpServerProxy: false, // 是否使用服务器代理调用
};
dsFieldObj = PnUtil.deepMerge(dsFieldObj, customObj);
return dsFieldObj
};
buildFuncCompDatasourceField函数接收一个customObj对象参数，函数内部会将customObj对象与内部定义的数据源相关的默认配置属性进行合并。
在定义configDataTemp时，我们可以通过Object.assign的方式将数据源相关配置属性字段对象与其他功能相关配置属性进行合并定义，类似下面这段代码所示：
configDataTemp: Object.assign({
title: ''
}, PnDesigner.buildFuncCompDatasourceField({
ds_resultObjTemplate: [
{
field: 'value',
remark: '文本值'
}
],
ds_resultObj: [
{
"value": "基于SpringBoot+Vue构建的数据可视化开发平台"
}
],
ds_useFilter: true,
ds_useTimer: true,
}))
一般我们在开发组件并配置默认的数据源配置属性时，buildFuncCompDatasourceField中经常需要配置覆盖的主要是ds_resultObjTemplate、ds_resultObj、ds_useFilter、ds_useTimer这几个属性。