页面编辑器数据说明

前言

前言:无论是什么数据,在解析之前,都需要先创建一个VUE模板文件,即index.vue。后续的数据需要填充到此文件中。
index.vue空模板文件如下:

<template>
  <div class="main-container">
    //(一)在此处插入html代码
  </div>
</template>
<script>
 export default {
  data() {
    return {
      // (二) 在此处插入js变量名
    };
  },
  created() {},
  methods: {
    //  (三) 在此处插入js方法
 },
  mounted() {
    this.$nextTick(() => {});
  },
};
</script>
<style scoped lang="less">
 //(四)在此处插入css代码
</style>
注意:
1、vue文件中,所有的缩进均为空格,一次缩进为两个空格;
2、用<style></style>包裹的代码块均为键值对,且键和值都无引号;
3、后续解析的数据,均需生成html代码和css代码,html代码需要追加到<div class="main-container"></div>里面的(一)处,如
  <div class="main-container">
    <img src="@/assets/imgs/data_center_arr.png" id="img-1679273516" data-equip-name="111" />
  </div>
css代码需要追加到<style scoped lang="less"></style>里面的(四)处,如
<style scoped lang="less">
   #wrap-1679273516 {
    width: 100%;
    height: 20%;
    background: yellow;
    position: absolute;
    left: 0;
    top: 0;
  }
</style>
json和代码片段的对应

每一段json数据都会和html代码、css代码形成对应关系,json示例如下:

"img-1679273516": {
        "src": "img/photo.png",
        "width": "12.8%",
        "height": "16.28%",
        "top": "33.33%",
        "left": "15.9%",
        "position": "absolute",
        "zIndex": 0,
        "equipName": "111" 
 }

其中最外层的键名img-1679273516,以及src、equipName与html相对应,需要生成如下的html代码片段:

<img id="img-1679273516" data-equip-name="111" src="img/photo.png">

其中最外层的键名img-1679273516,以及width、height、top、left、position、zIndex与css相对应,需要生成如下的css代码片段:

#img-1679273516{ 
    width: 12.8%;
    height: 16.28%;
    position: absolute;
    top: 33.33%;
    left: 15.9%;
    z-index: 0;
}

具体的对应关系在API中有详细标注。

元素类型

json包含多种元素,如代表图片的img、代表按钮的button、代表视频的video等等,不同的元素对应不同的html和css代码片段,而且会根据编辑器的完善而增加,我们可以根据json的键名区分元素类型,如img-1679273516代表图片元素,需要对应图片的api。

嵌套关系

json中会出现嵌套关系代码,我们目前只涉及到了一级嵌套,如果有嵌套,则json最外层键名会以wrap开头,我们需要通过内部的键名child解析下一级元素,如

"wrap-1679292022": {
        "equipName":"121",
        "width":"40.62%",
        "height":"63.19%",
        "top":"7.61%",
        "left":"28.99%",
        "position":"absolute",
        "zIndex":0,
        "child":{
               #img-1679273516{ 
                      "equipName":"122",
                      "src": "img/photo.png",
                      "width":"40.62%",
                      "height":"63.19%",
                      "top":"7.61%",
                      "left":"28.99%",
                      "position":"absolute",
                      "zIndex":0,
                }
        }
}

在上述json中出现了嵌套关系,最外层为wrap解析的元素,内部包含一个img元素。wrap开头的键名对应的元素为div,上述json对应的html代码片段为:

        <div id="wrap-1679292022" data-equip-name="121">
            <img id="img-1679273516" data-equip-name="122" src="img/photo.png">
        </div>

上述json对应的css代码片段为:

#wrap-1679273516{ 
    width: 12.8%;
    height: 16.28%;
    position: absolute;
    top: 33.33%;
    left: 15.9%;
    z-index: 0;
}
#img-1679273516{ 
    width: 12.8%;
    height: 16.28%;
    position: absolute;
    top: 33.33%;
    left: 15.9%;
    z-index: 0;
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容