第一步：定义组件属性，组件JSON格式模版

打开：src\views\controlconfig.js。添加一个组件JSON节点，并设置控件属性

 {
    type: "title1", //组件类型
    name: "通用标题",//组件名称
    id: "",  //组件ID
    locked: false,///组件是否锁住
    hided: false,///组件是否隐藏
    coverimg: "/assets/main-title-332-144.png",///组件库展示图
    options: {
      ...commattr, //公共属性
      w: 300, ///组件宽度
      h: 40, ///组件高度
      value: "测试标题",//组件默认值
      fontsize: 16,//字体大小
      fontcolor: "rgb(255, 255, 255)",///字体颜色
      borderradius: 0,//变宽框圆角
      borderwidth: 0,//边框宽度
      borderstyle: "solid",//边框样式
      bordercolor: "",///边框颜色
      lineheight: 40,//文字高度
      textAlign: "center",//显示位置 居中，靠左，靠右
      fontfamily: "Microsoft YaHei",///字体
      backgroundcolor: "",//背景颜色
      style:
        "color: rgb(255, 255, 255); overflow: unset; text-overflow: unset; white-space: unset; background-image: none; background-clip: unset; -webkit-text-fill-color: initial;white-space:nowrap;", //自定义样式

      ...animation,///滤镜配置
      dataconfig: { ...dataconfig }, ///数据源配置信息
    },
  },

第二步：布画设计时组件渲染实现代码

打开：找到src\views\canvas-main\cortrlitem.vue。添加布画设计时显示组件内容代码，如下图代码：

<titlecontrol v-else-if="control.type === 'title1'" :w="control.options.w" :h="control.options.h"
      :val="control.options.value" :cssstyle="getObjectCss()"></titlecontrol>

第三步：大屏设计json生成vue源码

找到public\buildpublish.html。添加生成vue代码生成，如下图代码：

{{else  type=='title1'}}
                                ${buildfromcode.builddataConfig($data)}
                              <titlecontrol ref="${id}" :w="${options.w}" :h="${options.h}" :val="fromData.${id}" cssstyle="${controlcss($data)}"  {{html buildfromcode.buildEvent($data)}} {{html options.tagattr}}></titlecontrol>

${}符号为组件JSON属性值。

详细语法规则请参考jquery.tmpl 帮助文档 (opens new window)

第四步：渲染注册

找到Src/views/preview/index.vue， 将新组件注册进去，这样一个新的可视化大屏设计器组件就集成成功了。