mall-cook实现流程-怎么实现一个diy｜diy的详细步骤｜记录使用diy【第一篇：schema的使用】

没有找到一篇关于mall-cook详细使用的文章，都是大佬对我们太不友好了。自己一点一点摸索出来，在这上面记录分享出来，便于想去了解的小伙伴们，更是加深一下自己的印象（ >_< 以后忘记了有个地方看）

介绍的是关于mall-cook的diy

一步一步分析，实现的逻辑：

首先在 git下载 mall-cook 开源代码

管理后台配置diy

找到schema 生成器页面

schema 生成器对应的.vue

分析：

<ul class="schema-head">
      <li>schema 生成器</li>
      <li>
        <el-button size="small" @click="resetSchema">重置 schema</el-button>
        <el-button size="small" class="f-white bg-theme" @click="exportSchema">导出 schema</el-button>
      </li>
</ul>

对应

<div class="schema-body">
     <schema-content></schema-content>
</div>

对应

<!-- 导出schema 弹窗 -->
<schema-export ref="export"></schema-export>

对应

我们先看中间模块

<schema-content></schema-content>

这里又分为三个模块

对应left center right

我们先看 left

<!-- left -->
    <div class="canvas-left">
      <draggable
        v-model="$cmpConfig"
        :options="{ group: { name: 'itxst', pull: 'clone' }, sort: false }"
        :clone="handleClone"
        animation="300"
      >
        <div
          v-for="(item,index) in $cmpConfig"
          :key="index"
          class="canvas-left-item"
        >
          <span class="f13">{{ item.label }}</span>
          <span class="canvas-left-item-type">{{ item.type }}</span>
        </div>
      </draggable>
    </div>

这里用到了draggable拖拽插件

v-for=“(item,index) in $cmpConfig” 中 $cmpConfig 是什么？
对应

我们再看中间

<div class="canvas-center-drag">
        <schema-content-item
          :componentList.sync="content.model.componentList"
        ></schema-content-item>
       //只看schema-content-item组件
</div>

这里也用到了draggable拖拽插件
当我们把left的组件拖拽到center中的时候，数据是怎么传递的呢？

我们发现，left和center的draggable的group都是相同的！


原来相同group的draggable之间可以相互传递数据，
left拖拽过来的元素，会通过left的:clone=“handleClone”

handleClone (e) {
      return {
        ...this.$cloneDeep(e),
        id: this.$getRandomCode(8),
        property: `${e.type}_${this.$getRandomCode(2, false)}`
      }
}

center的draggable会通过v-model="list"自动接收到


center拿到拖拽过来的数据后，会通过数据的组件名称，去动态加载组件对应组件名称的组件

加载组件完成后，center就会显示出来

当我们点击center中的组件的时候，会显示right的组件

原理：这里用到了//依赖注入：provide和inject（父级provide，多级后代使用inject获取）会同步修改父组件中的数据

子组件修改了依赖注入的content值，父组件中会同步修改数据

this.content.curComponent = true 后，在父组件中会显示rigth 对应的组件（根据组件名）

在right中也是用依赖注入：provide和inject（父级provide，多级后代使用inject获取）会同步修改父组件中的数据

right 修改数据后 ，会通过父组件同步传给 center

<schema-content-item
   :componentList.sync="content.model.componentList"
>
></schema-content-item>

center 通过 v-bind=“item” 传值给对应显示的组件，这里用到了混入公共文件 mixins: [schemaMixin],

混入文件这里 接收v-bind=“item” 传过来的值，通过props：{***}解构到这里.

在right中修改的值，会通过此方式解构后，在center显示的组件中直接用，center 就会随right的修改 而 显示修改的地方

最后就是导出json数据了

这里会把 依赖注入content中组件参数，通过递归写成json的数据，并显示出来（导出-弹窗-显示json）

	open () {
      this.show = true
      this.init()
    },

    init () {
      this.config = {
        name: this.content.model.label,
        icon: this.content.model.icon,
        fields: {}
      }
      this.content.model.componentList.map(cmp => {
        this.initFields(cmp, this.config.fields)
      })
      this.isComplete = true
    },
    //导出JSON数据在这里修改 --xuxiong
    initFields (config, fields) {
      console.log('打印~~~', config)
      let { property, label, type, child, value, data, options ,tag,name } = config
      let target = (fields[property] = ['object', 'array'].includes(type)
        ? { label, type }
        : { label, type, value })

      data && (target.data = data)
      options && (target.options = options)
      name && (target.name = name)
      tag && (target.tag = tag)


      if (child) {
        target.child = {}
        child.map(c => this.initFields(c, target.child))
      }
    }

schema 生成器页面结束了，之后就开始使用自定义组件了

第二篇