vue实战-模版建站实现思路

前言

随着电商的不断发展，固定的单一页面早已知足不了运营的平常需求。这个时候就须要开发一个功能来赋能运营“随意”搭配一些个性页面。咱们把这个功能叫做模版建站。

展现

首先咱们来看看别人是怎么作的。

一、有赞的截图：

二、微盟的截图：

能够看到有赞和微盟的实现基本上是同样的只不过在操做方式和界面风格上有点差别。

分析实现

接下来咱们一块儿分析一下如何去实现这个功能。

能够看到咱们能够把页面简单划分红两大区域：左（预览+组件列表）、右（编辑）。 接下来能够先把简单框架搭建起来。

<template>
  <div class="home">
    <div class="left">
      <div class="preview">
        <!--预览-->
      </div>
      <div class="buttons">
        <!--组件列表-->
      </div>
    </div>

    <div class="right">
        <!--编辑-->
    </div>
  </div>
</template>
复制代码

接下来咱们再来看看组件怎么去实现

能够看到左侧预览列表是由多个组件组成的，点击预览区域的某一个组件右侧就会显示对应的组件编辑功能。咱们能够把组件进行分类，而后每一个类型的组件都各自去实现一套预览(展现数据)和编辑（修改数据）的功能就能够了。 而后再来调整一下咱们的代码：

<template>
  <div class="home">
    <div class="left">
      <div class="preview">
        <template v-for="(componentData, i) in list">
          <div class="preview-item" :key="componentData._t" @click="changeActiveIndex(i)" >
            <!--预览组件列表-->
            <component :data="componentData" :index="i" :is="getPreivew(componentData)" ></component>
          </div>
        </template>
      </div>
      <div class="buttons">
        <button @click="addComponent('Magic')">魔方</button>
        <button @click="addComponent('Swiper')">轮播图</button>
        <button @click="addComponent('GoodList')">商品列表</button>
        <button @click="addComponent('Search')">搜索条</button>
        <button @click="addComponent('ScrollGoodList')">商品横向滚动</button>
      </div>
    </div>

    <div class="right">
      <div class="edit" v-if="activeIndex > -1">
        <!--选中的组件编辑区域-->
        <component :is="getEdit()" :data="editComponent" :index="activeIndex" @update="updateComponentData" ></component>
      </div>
    </div>
  </div>
</template>
复制代码

页面的框架搭建出来了接下来咱们来实现每一个组件的预览和编辑功能。

好比魔方组件预览区域只要把对应的图片列表组件渲染出来就能够了

<template>
  <div class="magic-preview">
    <template v-if="noImages">
      magic - preivew
    </template>
    <template v-else>
      <div class="row" v-for="(row, i) in rows" :key="i">
        <div class="col" v-for="(col, j) in getCols(row)" :key="i * row + j">
          <img :src="getImageData(i, j)" />
        </div>
        <template v-if="row === rows">
          <div class="col" v-for="(col, j) in getBlockLength" :key="data.images.length + j" ></div>
        </template>
      </div>
    </template>
  </div>
</template>
复制代码

编辑区域的属性你们能够根据本身实际的需求进行自定义，咱们能够先简单支持控制每行显示图片的个数

<template>
  <div class="magic-edit">
    <div>
      列数：
      <el-input-number :value="data.column" @change="handleChange" :min="1" :max="5" ></el-input-number>
    </div>

    <div class="image-list">
      <ul>
        <li v-for="(image, i) in data.images" :key="image._t" @click="removeImage(i)" >
          <img :src="image.url" />
        </li>
      </ul>
    </div>

    <div>
      <el-button type="primary" @click="addImage">上传图片</el-button>
    </div>
  </div>
</template>
复制代码

其余组件的实现思路是同样的。 最后咱们就能够经过这些组件搭建各类各样的界面了 好比咱们能够搭建一个考拉h5的首页

总结

看着挺复杂的功能，分析以后实际上仍是挺简单的，不知道你们是否可以实现出来。这里有提供视频，不懂的同窗能够去看看。 视频地址：edu.csdn.net/course/deta…