Easyv使用遇到的问题

EasyV是⼀款在线数据可视化⼤屏开发软件，支持UE4。

UE4给Easyv发坐标位置，动态显示图片

easyv里的组可以动态设置坐标。

自定义组件

翻页组件

需求：点击翻页，控制显示不同的组件，没有接口交互。
实现遇到问题： main.js里的data是静态数据，在自定义事件里没有获取到翻页后数据的变化。
原因：easyv组件的加载顺序如下：
main.data.json静态数据(或其他数据源接口返回数据)–>平台过滤器处理（事件“当请求完成或数据变化时”）–>自定义组件代码业务逻辑（index.jsx的props里拿到的data/自定义回调、方法、事件等逻辑）.

解决方法： 在vue的data里定义变量，用这个变量更新main.js里的data，相当于调用接口更新main.js里的data。 再自己自定义事件，就能取到更改后的数据了。

具体实现：

// page.vue
<template>
  <div
    class="__easyv-component page_style"
    v-bind:id="id"
    v-bind:style="{
      position: 'absolute',
      width: width + 'px',
      height: height + 'px',
      left: left + 'px',
      top: top + 'px',
      textAlign: 'center',
    }"
  >
    <div @click="clickPage('pre')" class="arrow-div" :style="{height: configuration.arrow.height + 'px'}">
      <svg :width="configuration.arrow.width + 'px'" :height="configuration.arrow.height + 'px'" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M1 10L10 1H19L10 10L19 19H10L1 10Z" :stroke="configuration.arrow.color"/>
      </svg>
    </div>

    <div class="dot-div"
         :style="{
          height: configuration.arrow.height + 'px',
          paddingTop: configuration.dot.paddingTop + 'px'
        }"
    >
      <div
          v-for="(p, index) in size"
          :style="{
            width: configuration.dot.width + 'px',
            height: configuration.dot.height + 'px',
            backgroundColor: index === num -1 ? configuration.dot.selectedColor : configuration.dot.defaultColor,
            marginLeft: !index ? (configuration.dot.margin + 'px') : '',
            marginRight: configuration.dot.margin + 'px'
          }"
          class="dot"
      ></div>
    </div>

    <div @click="clickPage('next')" class="arrow-div" :style="{height: configuration.arrow.height + 'px'}">
      <svg :width="configuration.arrow.width + 'px'" :height="configuration.arrow.height + 'px'" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M20 10L11 1H2L11 10L2 19H11L20 10Z" :stroke="configuration.arrow.color"/>
      </svg>
    </div>
  </div>
</template>

<script>
import { reduceConfig } from "./utils/reduce-config";
export default {
  props: ["id", "left", "top", "width", "height", "configuration", "data", "emit"],
  computed: {
    config: function () {
      return reduceConfig(this.configuration);
    },
  },
  data() {
    return {
      num: 1,
      size: 3
    }
  },
  mounted() {
    this.num = this.data[0].pageNum
    this.size = this.data[0].pageSize
  },
  methods : {
    clickPage(tag) {
      if (tag === 'pre'){
        if(this.num > 1){
          this.num--
        }
      } else {
        if(this.num < this.size){
          this.num++
        }
      }
      this.data[0].pageNum = this.num    // 动态给data赋值
      this.data[0].pageSize = this.size  // 动态给data赋值
      this.emit('customChange', this.data) // 调用自定义事件，把data传过去
      console.log('this.num', this.data)
    }
  }
};
</script>

<style scoped>
.page_style {
  display: flex;
}
.dot-div {
  display: inline-block;
  padding: 0 12px;
}
.dot {
  display: inline-block;
}
</style>

// main.json
{
  "base": {
    "name": "翻页组件",
    "module_name": "page",
    "version": "1.0.6",
    "show": 1
  },
  "width": 400,
  "height": 40,
  "configuration": [
    {
      "name": "arrow",
      "displayName": "箭头样式",
      "value": [
        {
          "name": "width",
          "displayName": "箭头宽",
          "type": "number",
          "value": 18
        },
        {
          "name": "height",
          "displayName": "箭头高",
          "type": "number",
          "value": 18
        },
        {
          "name": "color",
          "displayName": "箭头颜色",
          "type": "color",
          "value": "#fff"
        }
      ]
    },
    {
      "name": "dot",
      "displayName": "点样式",
      "value": [
        {
          "name": "width",
          "displayName": "点宽",
          "type": "number",
          "value": 8
        },
        {
          "name": "height",
          "displayName": "点高",
          "type": "number",
          "value": 8
        },
        {
          "name": "margin",
          "displayName": "点间隔",
          "type": "number",
          "value": 5
        },
        {
          "name": "defaultColor",
          "displayName": "点默认颜色",
          "type": "color",
          "value": "grey"
        },
        {
          "name": "selectedColor",
          "displayName": "点选中颜色",
          "type": "color",
          "value": "black"
        },
        {
          "name": "paddingTop",
          "displayName": "点距上间距",
          "type": "number",
          "value": 0
        }
      ]
    }
  ],
  "triggers": [
    {
      "name": "翻页触发",
      "value": "customChange" // 自定义事件
    }
  ]
}

// main.data.json
{
  "data": [
    {
      "pageSize": 10,
      "pageNum": 1
    }
  ],
  "fields": [
    {
      "name": "text",
      "value": "text",
      "desc": "文本"
    }
  ]
}