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…