共享组件

共享组件界面如下： 组件类型：基础组件、布局组件都来自表单设计布画的保存组件功能。自定义组件是客户新增一个vue源码的自定义组件功能。

功能点：

• 查询：进行刷新列表
• 重置：将查询条件重置初始化状态。
• 新增自定义组件：点击新增自定义组件界面。
• 显示/隐藏：隐藏或者显示查询条件模块。
• 刷新：点击刷新列表数据。
• 修改：针对新增自定义组件进行修改更改。
• 删除：针对共享组件进行删除。

新增自定义组件界面功能如下：

• 组件代码区域
  • Script：组件逻辑代码实现功能，备注说明：第一点：语法必须符合vue语法。第二点：props属性是大屏设计与当前组件通信的桥梁，大屏设计可以将变量通过props定义的属性，传入到当前组件中。具体props用法请参考【组件_vue props (opens new window)】第三点： this.$emit钩子事件函数，如定义this.$emit(“testevent”) 事件方法，从而通知外部大屏设计逻辑变化。具体$emit的用法请参考【组件事件 | Vue.js (opens new window)】
  • Template：是vue的template部分，element ui，datav,可视化大屏设计上的所有组件都时默认已经注册过的，可以直接编写对应组件。
  • Css：是自定义组件的css内容，最后编译后css都是私有的。
  • 【运行】点击：将动态vue源码进行动态编译预览。
  • 【导入vue源码】：自定义在本地vscode、idea等本地开发工具中进行编写，编写完成后可一键导入。
  • 【导出vue源码】：将在线编辑的vue源码进行导出保存为vue文件。
  • 【导出】：将在线编辑的自定义组件进行导出json备份。
  • 【导入】：将导出自定义组件json进行导入。
  • 【确定】：将自定义组件进行保存到数据库中。
  • 【关闭】：将当前层界面进行关闭。
• 初始组件属性配置：
  • 属性配置：
    • 新增自定义属性配置：它是跟props相关的，必须先添加props属性，才能新增自定义属性配置。

新增自定义属性配置如下图：

• 配置属性：数据来源于自定义组件的props
• 属性名称：给该属性定义一个属性的名称
• 编辑类型：大屏设计时，该组件使用什么组件，给当前属性进行编辑。
• 生成formdata：如果是，大屏设计时会在formData中增加该属性的变量。
• 默认值：设置该属性的默认值。
• 默认值是否json :开启状态下会将json转成对象传入到该属性，否则是以字符串方式传入到该属性。
• 其它：设置下拉列表选项值。
• 组件名称：必填，给组件进行命名，用于组件搜索
• 数据设置->自动缩放：该按钮开启状态下，大屏设计该组件，拉宽拉大都会占满这个组件设计的宽高的。