vue 可拖拽组件（左边是组件，中间显示组件内容，右边修改组件样式，内容）

需要安装vue拖拽插件：

npm install vuedraggable

引用：

import draggable from 'vuedraggable'

直接上代码完整代码：

<style lang="scss" scoped>
.edit {
  width: 100%;
  height: calc(100vh - 75px);
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  .edit-left {
    width: 185px;
    height: 100%;
    border-right: 1px solid #ccc;
    // overflow-y: scroll;
    .edit-left-menus {
      .edit-left-menus-button {
        position: relative;
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 58px;
        border-bottom: 2px solid #3091f2;
        color: #3091f2;
        font-size: 14px;
        i {
          font-size: 18px;
          margin-right: 5px;
        }
        .edit-left-menus-button-tag {
          position: absolute;
          width: 14px;
          height: 14px;
          background: #3091f2;
          bottom: -7px;
          left: 50%;
          margin-left: -7px;
          transform: rotate(45deg);
        }
      }
      .edit-left-menus-content {
        cursor: pointer;
        height: calc(100% - 60px);
        overflow: auto;
        display: flex;
        justify-content: flex-start;
        align-content: flex-start;
        flex-wrap: wrap;
        .edit-left-menus-content-box {
          width: 90px;
          height: 90px;
          .edit-left-menus-content-box-item {
            &.active {
              border: 0.2px solid blue;
            }
            .edit-left-menus-item {
              width: 90px;
              height: 90px;
              border: 0.5px solid #eee;
              box-sizing: border-box;
              display: flex;
              flex-direction: column;
              justify-content: center;
              align-items: center;
              font-size: 12px;
              color: #59607b;
              .edit-left-menus-item-icon {
                width: 24px;
                height: 25px;
                margin-bottom: 10px;
                i {
                  font-size: 24px;
                }
              }
            }
          }
        }
      }
      .edit-left-menus-title {
        font-size: 16px;
        padding: 15px;
      }
      .edit-left-menus-top {
        width: 225px;
        height: 360px;
        // background: url("./images2/top.jpg") no-repeat center center;
        background-size: 100% 100%;
      }
      .edit-left-menus-playbill {
        margin: 0 auto;
        width: 225px;
        height: 240px;
        // background: url("./images2/playbill.jpg") no-repeat center center;
        background-size: 100% 100%;
      }
      .edit-left-menus-swiperType {
        margin: 0 auto;
        width: 225px;
        height: 137px;
        // background: url("./images2/swiper_items.jpg") no-repeat center center;
        background-size: 100% 100%;
      }
      .edit-left-menus-killprefecture {
        margin: 0 auto;
        width: 225px;
        height: 90px;
        // background: url("./images2/killArea.jpg") no-repeat center center;
        background-size: 100% 100%;
      }
      .edit-left-menus-tabs {
        margin: 0 auto;
        width: 225px;
        height: 90px;
        // background: url("./images2/tabs.jpg") no-repeat center center;
        background-size: 100% 100%;
      }
      .edit-left-menus-choices {
        margin: 0 auto;
        width: 225px;
        height: 143px;
        // background: url("./images2/goodChoice.jpg") no-repeat center center;
        background-size: 100% 100%;
      }
      .edit-left-menus-foryou {
        margin: 0 auto;
        width: 225px;
        height: 54px;
        // background: url("./images2/forYou.jpg") no-repeat center center;
        background-size: 100% 100%;
      }
      .edit-left-menus-ticket {
        margin: 0 auto;
        width: 225px;
        height: 40px;
        // background: url("./images2/ticket.jpg") no-repeat center center;
        background-size: 100% 100%;
      }
      .edit-left-menus-list1 {
        margin: 0 auto;
        width: 225px;
        height: 284px;
        // background: url("./images2/list1.jpg") no-repeat center center;
        background-size: 100% 100%;
      }
      .edit-left-menus-list2 {
        margin: 0 auto;
        width: 225px;
        height: 243px;
        // background: url("./images2/list2.jpg") no-repeat center center;
        background-size: 100% 100%;
      }
    }
  }
  .edit-middle {
    position: relative;
    flex: 1;
    .release-btn-div {
      position: relative;
      padding-top: 20px;
      padding-right: 10px;
      float: right;
    }
    .edit-middle-view {
      // position: absolute;
      position: relative;
      width: 380px;
      height: 667px;
      top: 60%;
      left: 50%;
      transform: translate3d(-50%, -50%, 0);
      border-radius: 5px;
      border: 2px solid #000;
      overflow-y: scroll;
      overflow-x: hidden;
      scrollbar-width: none;  
      &::-webkit-scrollbar {
        display: none;
      }
    }
  }
  .edit-right {
    width: 400px;
    overflow-y: scroll;
    border-left: 1px solid #ccc;
    padding: 10px;
    background: #f4f4fa;
    .edit-right-deploy {
      height: 100%;
      position: relative;
    }
  }
}
</style>

<template>
  <div class="edit">
    <div class="edit-left">
      <div class="edit-left-menus">
        <div class="edit-left-menus-button">
          <div class="edit-left-menus-button-tag"></div>
          <i class="el-icon-edit"></i>
          组件库
        </div>
        <div class="edit-left-menus-content">
          <div
            class="edit-left-menus-content-box"
            v-for="(item, index) in list"
            :key="index"
          >
            <draggable
              class="edit-left-menus-content-box-item"
              :class="{ active: item.active }"
              v-model="list[index]"
              :group="{ name: 'people', pull: 'clone', put: false }"
            >
              <div
                class="edit-left-menus-item"
                v-for="(itemize, num) in list[index]"
                :key="num"
              >
                <div class="edit-left-menus-item-icon">
                  <i class="el-icon-picture-outline"></i>
                </div>
                {{ itemize.title }}
              </div>
            </draggable>
          </div>
        </div>
      </div>
    </div>
    <div class="edit-middle">
      <div class="release-btn-div">
        <el-button
          type="info"
          size="medium"
          :loading="releaseIngFlg"
          @click="releaseCurPage()"
          >发布到小程序</el-button
        >
      </div>
      <draggable
        class="edit-middle-view"
        :list="coms"
        group="people"
        @change="changeInfo($event)"
      >
        <component
          :is="item.show"
          :data="item"
          v-for="(item, index) in coms"
          :key="`com${index}`"
          :click="dragClick"
        ></component>
      </draggable>
    </div>
    <div class="edit-right">
      <div class="edit-right-deploy">
        <component :is="editName" :data="editData"></component>
      </div>
    </div>
  </div>
</template>

<script>
import draggable from "vuedraggable";
import showMiddleWheelPic from "./components/showMiddleWheelPic"; // 中间轮播
import showMiddleHomePageArea from "./components/showMiddleHomePageArea";
import showMiddleHomeBanner from "./components/showMiddleHomeBanner";
import showMiddleExcellentProducts from "./components/showMiddleExcellentProducts";
import showMiddleActivityArea from "./components/showMiddleActivityArea";
import showMiddleNewProducts from "./components/showMiddleNewProducts";
import showMiddleProductsList from "./components/showMiddleProductsList";
import showMiddleVideoModule from "./components/showMiddleVideoModule";
import editHomeWheelPic from "./components/editHomeWheelPic";
import editHomePageArea from "./components/editHomePageArea";
import editHomeBanner from "./components/editHomeBanner";
import editExcellentProducts from "./components/editExcellentProducts";
import editActivityArea from "./components/editActivityArea";
import editNewProducts from "./components/editNewProducts";
import editProductsList from "./components/editProductsList";
import editVideoModule from "./components/editVideoModule";
import showMiddleFreePanel from "./components/showMiddleFreePanel";
import {
  getPageConfig,
  releasePageVersionByCode,
  savePageConfig,
} from "@/api/dynamic/dynamicHome";

// import { getPageConfig } from '../../api/editPage'

import pageArea1 from "@/views/sys/dynamicPage/home/images/pageArea1.png";
import pageArea2 from "@/views/sys/dynamicPage/home/images/pageArea2.png";
import pageArea3 from "@/views/sys/dynamicPage/home/images/pageArea3.png";
import banner1 from "@/views/sys/dynamicPage/home/images/banner1.png";
import activityBanner1 from "@/views/sys/dynamicPage/home/images/activityBanner1.png";
import activityBanner2 from "@/views/sys/dynamicPage/home/images/activityBanner2.png";
export default {
  data() {
    return {
      list: [],
      list1: [
        {
          id: 1,
          title: "轮播图",
          name: "homeWheelPic",
          edit: "editHomeWheelPic",
          show: "showMiddleWheelPic",
          active: false,
          type: "homeWheelPicList", // pic or swiper
        },
      ],
      list2: [
        {
          //专区
          id: 2,
          title: "专区",
          name: "homePageArea",
          edit: "editHomePageArea",
          show: "showMiddleHomePageArea",
          active: false,
          type: "homePageAreaList",
        },
      ],
      list3: [
        {
          // banner
          id: 3,
          title: "banner图",
          name: "homeBanner",
          edit: "editHomeBanner",
          show: "showMiddleHomeBanner",
          active: false,
          type: "homeBannerPic",
        },
      ],
      list4: [
        {
          // 黔货优品
          id: 4,
          title: "黔货优品",
          name: "excellentProducts",
          edit: "editExcellentProducts",
          show: "showMiddleExcellentProducts",
          active: false,
          type: "ExcellentProductsList",
        },
      ],
      list5: [
        {
          //活动专区
          id: 5,
          title: "活动专区",
          name: "activityArea",
          edit: "editActivityArea",
          show: "showMiddleActivityArea",
          active: false,
          type: "ActivityAreaList",
        },
      ],
      list6: [
        {
          // 新品上架
          id: 6,
          title: "新品上架",
          name: "newProducts",
          edit: "editNewProducts",
          show: "showMiddleNewProducts",
          active: false,
          type: "NewProductsList",
        },
      ],
      list7: [
        {
          id: 7,
          title: "商品列表",
          name: "productsList",
          edit: "editProductsList",
          show: "showMiddleProductsList",
          active: false,
          type: "products",
        },
      ],
      list8: [
        {
          id: 8,
          title: "视频模块",
          name: "videoModule",
          edit: "editVideoModule",
          show: "showMiddleVideoModule",
          active: false,
          type: "video",
        },
      ],
      list9: [
        {
          id: 9,
          title: "自由面板",
          name: "freePanel",
          edit: "editFreePanel",
          show: "showMiddleFreePanel",
          active: false,
          type: "freePanel",
        },
      ],
      list10: [
        {
          id: 10,
          title: "图片",
          name: "picModule",
          edit: "editPicModule",
          show: "showMiddlePicModule",
          active: false,
          type: "picModule",
        },
      ],
      editName: "",
      editData: {},
      selMiddleShowIndex: "",
      releaseIngFlg: false,
    };
  },
  created() {
    for (let i = 1; i <= 10; i++) {
      this.list.push(this[`list${i}`]);
    }
  },
  mounted() {
    this.getList();
  },
  methods: {
    changeInfo(e) {
      // console.log(e);
      try {
        let comsObjInfo = e.added.element;
        // console.log(JSON.stringify(comsObjInfo));
        if (comsObjInfo.edit && e.added.newIndex != e.added.newIndex) {
          console.log(1)
        }
      } catch (error) {
        return;
      }
    },
    getList() {
      let code = "home";
      getPageConfig(code).then((res) => {
        if (res.code === 200) {
          if (res.data) {
            this.$store.commit("saveListId", res.data.id);
            try {
              this.coms = JSON.parse(res.data.content);
            } catch (e) {
              this.coms = res.data.content;
            }
          }
        }
      });
    },
    releaseCurPage() {
      let pageCode = "home";
      this.$confirm("您确定要发布当前页面到小程序吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.releaseIngFlg = true;
          releasePageVersionByCode(pageCode).then((response) => {
            this.$message({
              message: "小程序动态配置页面发布成功",
              type: "success",
              duration: 2000,
            });
            this.releaseIngFlg = false;
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消发布",
          });
          this.releaseIngFlg = false;
        });
    },
    dragClick(data) {
      let firstActiveFlg = true;
      for (let i = 0; i < this.coms.length; i++) {
        if (firstActiveFlg && this.coms[i] === data) {
          firstActiveFlg = false;
          this.coms[i].active = true;
          this.editName = data.edit;
          this.editData = data;
        } else {
          this.coms[i].active = false;
        }
      }
    },
  },
  filters: {
    formatText(str, num) {
      if (str.length >= num) {
        str = str.slice(0, num);
      }
      return str;
    },
  },
  computed: {
    coms: {
      get() {
        return this.$store.state.myList;
      },
      set(value) {
        this.$store.commit("updateList", value);
      },
    },
  },
  components: {
    draggable,
    showMiddleWheelPic,
    showMiddleHomePageArea,
    showMiddleHomeBanner,
    showMiddleExcellentProducts,
    showMiddleActivityArea,
    showMiddleNewProducts,
    showMiddleProductsList,
    showMiddleVideoModule,
    editHomeWheelPic,
    editHomePageArea,
    editHomeBanner,
    editExcellentProducts,
    editActivityArea,
    editNewProducts,
    editProductsList,
    editVideoModule,
    showMiddleFreePanel,
  },
};
</script>

 

 状态管理代码：

import Vue from 'vue'
import Vuex from 'vuex'
import app from './modules/app'
import user from './modules/user'
import permission from './modules/permission'
import tagsView from './tagsView'
import getters from './getters'
import uploadInfo from './modules/uploadInfo'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    myList: [],
    myList2: [],
    myList3: [],
    listId: '',
    listId2: '',
    listId3: ''
  },
  mutations: {
    updateList: (state, data) => {
      state.myList = data
    },
    saveListId: (state, data) => {
      state.listId = data
    },
    
    deleteModule: (state) => {
      state.myList = state.myList.filter((item)=>{
        return item.active === false
      })
    },
    
    
  },
  modules: {
    app,
    user,
    permission,
    tagsView,
    uploadInfo
  },
  getters
})

export default store

右边修改组件内容，列如：轮播图组件：

<style lang="scss" scoped>
.height {
  text-align: start;
  margin-bottom: 10px;
  margin-left: 10px;
  font-size: 15px;
  font-weight: 400;
  color: rgb(85, 26, 161);
}
.width {
  text-align: start;
  margin-bottom: 10px;
  margin-left: 10px;
  font-size: 15px;
  font-weight: 400;
  color: rgb(219, 213, 228);
}
.module-item {
  // background: chartreuse;
  margin-bottom: 10px;

  .module-item-upload {
    position: relative;
    z-index: 10;

    input {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 11;
      opacity: 0;
    }
  }

  // &.down {
  //   width: 100%;
  //   position: absolute;
  //   left: 0;
  //   bottom: 0;
  //   display: flex;
  //   justify-content: space-between;
  //   align-items: center;

  // button {
  //   flex: 1;
  // }
  // }
}

/deep/ .el-dialog .el-input {
  width: 40%;
}

.module-list {
  padding: 20px 0;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  flex-wrap: wrap;
  max-height: 500px;
  overflow-y: scroll;

  .module-list-item {
    padding: 5px;
    width: 130px;
    border-radius: 5px;
    margin-bottom: 10px;
    border: 1px solid #ccc;

    &.active {
      border: 1px solid red;
    }

    .module-list-item-img {
      width: 100%;
      height: auto;

      img {
        width: 100%;
      }
    }

    .module-list-item-text {
      padding: 0 10px;
      font-size: 10px;
      line-height: 10px;
      text-overflow: -o-ellipsis-lastline;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
  }
}

.moduleEdit-img-preview {
  width: 150px;
  height: auto;

  img {
    width: 150px;
  }
}

.collapse {
  margin-bottom: 10px;

  /deep/ .el-collapse-item__header {
    text-indent: 15px;
  }

  .header-icon {
    font-style: normal;
    color: red;
  }

  .collapse-content {
    padding: 0px 15px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;

    .collapse-content-jump {
      margin-top: 15px;
    }

    .collapse-content-picmodel {
      display: flex;
      // width: 217px;
      position: relative;
      justify-content: center;
      align-items: center;
      padding-left: 30px;

      .collapse-content-picmodel-info {
        font-size: 12px;
        margin-top: 0px;
      }

      img {
        margin-left: 10px;
        width: 130px;
        height: 80px;
      }
    }

    .btn {
      margin-top: 10px;

      .moduleEdit-img-upload {
        margin: 10px 0;
        position: relative;
        z-index: 10;

        input {
          position: absolute;
          width: 100%;
          height: 100%;
          top: 0;
          left: 0;
          opacity: 0;
          z-index: 11;
        }
      }
    }
    .showDetail {
      margin-top: 10px;
      width: 350px;
      .showDetail-top {
        border-bottom: 1px solid #c3c3c3;
        padding: 10px;
        font-size: 14px;
        font-weight: 500;
        color: #696969;
        line-height: 20px;
        text-align: center;
        border: 1px solid #c3c3c3;
      }
      .showDetail-bottom {
        border: 1px solid #c3c3c3;
        padding: 20px 18px 20px 18px;
        background: #f4f4f9;
        .showDetail-bottom-body {
          display: flex;
          padding: 10px;
          background: #ffffff;
          border: 1px solid #c3c3c3;
          .showDetail-bottom-body-left {
            img {
              width: 85px;
              height: 85px;
            }
          }
          .showDetail-bottom-body-right {
            margin-left: 14px;
            font-size: 14px;
            font-weight: 500;
            color: #696969;
            line-height: 20px;
          }
        }
      }
    }
  }
}
</style>
<template>
  <div class="module">
    <el-tabs>
      <el-tab-pane label="图片轮播设置">
        <el-button
          @click="addSwiperItem()"
          type="primary"
          style="width: 100%;  margin-bottom: 10px"
          >添加轮播项</el-button
        >
        <el-collapse class="collapse" v-model="activeName" accordion>
          <el-collapse-item
            v-for="(item, index) in contentDataList"
            :key="index"
            :name="index + 1"
          >
            <template slot="title">轮播项{{ index + 1 }}</template>
            <div class="collapse-content">
              <div class="collapse-content-picmodel">
                <single-upload
                  v-model="item.oriPic"
                  :tipsMsg="uploadTipsMsg"
                  :maxSizeK="updateMaxSizeK"
                  :showSmallBtnFlg="true"
                ></single-upload>
              </div>
              <div class="btn">
                <el-button type="primary" size="mini" @click="modifyProduct(index)"
                  >修改点击事件</el-button
                >
                <el-button type="warning" size="mini" @click="delProduct(index)"
                  >清除点击事件</el-button
                >
              </div>
              <div class="showDetail">
                <div
                  class="showDetail-top"
                  v-if="item.type === 'subject' || item.type === 'category'"
                >
                  跳转详情：
                  {{ item.name != "" || item.name != null ? item.name : "暂无跳转" }}
                </div>
                <div class="showDetail-top" v-else>
                  跳转详情：
                  {{
                    item.type === "" || item.type === null || item.type === undefined
                      ? "暂无跳转"
                      : item.type | typeFilter
                  }}
                </div>
                <div class="showDetail-bottom" v-if="item.type === 'product'">
                  <div class="showDetail-bottom-body">
                    <div class="showDetail-bottom-body-left">
                      <img :src="item.pic" alt="" />
                    </div>
                    <div class="showDetail-bottom-body-right">
                      <div style="margin-bottom: 10px">商品名称:{{ item.name }}</div>
                      <div style="margin-bottom: 10px">商品价格:￥{{ item.price }}</div>
                      <div>商品ID:{{ item.id }}</div>
                    </div>
                  </div>
                </div>
              </div>

              <div style="margin-top: 10px">
                <el-button
                  type="danger"
                  @click="delWheel(index)"
                  style="width: 400px; border-radius: 10px"
                  >删除轮播项{{ index + 1 }}</el-button
                >
              </div>
            </div>
          </el-collapse-item>
        </el-collapse>
      </el-tab-pane>
      <el-tab-pane label="高度设置">
        <div class="height">
          高度尺寸：
          <el-input-number
            v-model="height"
            controls-position="right"
            :min="193"
            :max="557"
            @change="heightChange()"
          ></el-input-number>
        </div>
        <div class="width">
          宽度尺寸：
          <el-input-number
            v-model="width"
            controls-position="right"
            :min="375"
            :max="375"
            disabled
          ></el-input-number>
        </div>
      </el-tab-pane>
    </el-tabs>
    <div class="module-item">
      <el-button type="primary" @click="save()">保存</el-button>
      <el-button type="danger" @click="delComponent()">删除模块</el-button>
    </div>
    <HomeDialogComponent
      v-if="showChangeDialogVisible"
      :homeDialogVisible="true"
      :propsActiveValue="propsActiveValue"
      @fun="childInvokeTransType"
    ></HomeDialogComponent>
  </div>
</template>
<script>
import SingleSelectProduct from "@/components/Product/singleSelectProduct";
import SingleUpload from "@/components/Upload/singleUpload";
import HomeDialogComponent from "../publicComponents/homeDialogComponent";
import { moduleComponentsDataTemplate } from "@/utils/dynamicRynUtils";
import {
  getPageConfig,
  releasePageVersionByCode,
  savePageConfig,
} from "@/api/dynamic/dynamicHome";

const defaultUploadMsg = "只能上传jpg/png文件，且不超过500K";
const defaultPageConfigInfo = {
  id: null,
  name: "",
  code: "",
  type: "",
  content: "",
  remark: "",
};
export default {
  components: { SingleUpload, HomeDialogComponent },
  props: ["data"],
  filters: {
    typeFilter(value) {
      if (value === "product") {
        return "商品详情";
      } else if (value === "couponList") {
        return "优惠券列表";
      } else if (value === "skillSecList") {
        return "秒杀列表";
      } else if (value === "groupBuyList") {
        return "拼团列表";
      } else if (value === "ecoMall") {
        return "生态商城";
      } else if (value === "qhScore") {
        return "黔货优品";
      } else if (value === "singleCoupon") {
        return "单张优惠券";
      } else if (value === "singleSkillSec") {
        return "单品秒杀";
      } else if (value === "singleGroupBuy") {
        return "单品拼团";
      } else if (value === "smsGoldenEgg") {
        return "砸金蛋";
      } else if (value === "turntable") {
        return "转盘";
      } else if (value === "limitList"){
        return "限购";
      }else {
        return;
      }
    },
  },
  mounted() {
    if (this.data.data === undefined) {
        this.contentDataList = [
          {
            id: "",
            pic: "",
            name: "",
            oriPic: "",
            price: "",
            type: "",
            childActiveName: "",
            cascaderFatherValue: "",
          },
        ];
      this.height = "193";
      this.width = this.data.width;
      this.defaultSave();
    } else {
      this.contentDataList = this.data.data;
      this.height = data.height;
      this.width = this.data.width;
    }
  },

  data() {
    return {
      propsActiveValue: "", //传给子组件的对象
      activeName: "", //折叠打开项
      height: "",
      width: "",
      showChangeDialogVisible: false,
      curSelIndex: null,
      uploadTipsMsg: defaultUploadMsg,
      updateMaxSizeK: 500,
      contentDataList: [
        {
          id: "",
          pic: "",
          name: "",
          oriPic: "",
          price: "",
          type: "",
          childActiveName: "",
          cascaderFatherValue: "",
        },
      ],
    };
  },
  watch: {
    data(newVal) {
      if (!newVal.data) {
        this.contentDataList = newVal.data;
        this.contentDataList = [
          {
            id: "",
            pic: "",
            name: "",
            oriPic: "",
            price: "",
            type: "",
            childActiveName: "",
            cascaderFatherValue: "",
          },
        ];
        this.height = "193";
        this.width = newVal.width;
        this.defaultSave();
      }
    },
  },
  methods: {
    childInvokeTransType(TransType) {
      this.showChangeDialogVisible = false;
      if (TransType == null || TransType == "") {
        return;
      }
      if (TransType.type === "product") {
        this.contentDataList[this.curSelIndex].id = TransType.id;
        if (
          this.contentDataList[this.curSelIndex].oriPic == "" ||
          this.contentDataList[this.curSelIndex].oriPic == null
        ) {
          this.contentDataList[this.curSelIndex].oriPic = TransType.pic;
        }
        this.contentDataList[this.curSelIndex].pic = TransType.pic;
        this.contentDataList[this.curSelIndex].name = TransType.name;
        this.contentDataList[this.curSelIndex].type = TransType.type;
        this.contentDataList[this.curSelIndex].price = TransType.price;
        this.contentDataList[this.curSelIndex].childActiveName =
          TransType.childActiveName;
        this.contentDataList[this.curSelIndex].cascaderFatherValue =
          TransType.cascaderFatherValue;
      } else {
        this.contentDataList[this.curSelIndex].id = TransType.id;
        this.contentDataList[this.curSelIndex].pic = TransType.pic;
        this.contentDataList[this.curSelIndex].name = TransType.name;
        this.contentDataList[this.curSelIndex].type = TransType.type;
        this.contentDataList[this.curSelIndex].price = TransType.price;
        this.contentDataList[this.curSelIndex].childActiveName =
          TransType.childActiveName;
        this.contentDataList[this.curSelIndex].cascaderFatherValue =
          TransType.cascaderFatherValue;
      }
    },
    defaultSave() {
      this.coms = this.coms.map((item) => {
        if (item.active) {
          item.data = this.contentDataList;
          item.width = "375";
          item.height = this.height;
          item.name = "homeWheelPic";
          item.edit = "editHomeWheelPic";
          item.title = "轮播图";
          item.active = true;
          item.show = "showMiddleWheelPic";
          item.type = "homeWheelPic";
        }
        return item;
      });
      savePageConfig({
        id: this.$store.state.listId || undefined,
        code: "home",
        content: JSON.stringify(this.coms),
        name: "home",
        type: "home",
      }).then((res) => {
        if (res.code === 200) {
          this.$parent.getList();
        }
      });
    },
    save() {
      this.coms = this.coms.map((item) => {
        if (item.active) {
          item.data = this.contentDataList;
          item.width = "375";
          item.height = this.height;
          item.name = "homeWheelPic";
          item.edit = "editHomeWheelPic";
          item.title = "轮播图";
          item.active = true;
          item.show = "showMiddleWheelPic";
          item.type = "homeWheelPic";
        }
        return item;
      });
      savePageConfig({
        id: this.$store.state.listId || undefined,
        code: "home",
        content: JSON.stringify(this.coms),
        name: "home",
        type: "home",
      }).then((res) => {
        if (res.code === 200) {
          this.$message({
            message: "保存成功",
            type: "success",
          });
          // this.getList()
          this.$parent.getList();
        }
      });
    },
    delComponent() {
      this.$store.commit("deleteModule");
      this.$parent.editName = ''
      this.save();
    },
    addSwiperItem() {
      if (this.contentDataList) {
        if (this.contentDataList.length < 6 || this.contentDataList.length === 0) {
          const obj = {
            id: "",
            pic: "",
            name: "",
            oriPic: "",
            price: "",
            type: "",
            childActiveName: "",
            cascaderFatherValue: "",
          };
          this.contentDataList.push(obj);
          this.activeName = this.contentDataList.length;
        } else {
          this.$message({
            message: "当前轮播图最多【" + 6 + "】个",
            type: "error",
            duration: 2000,
          });
        }
      }
    },

    delProduct(index) {
      this.contentDataList[index].type = "";
      this.contentDataList[index].id = "";
      this.contentDataList[index].childActiveName = "";
      this.contentDataList[index].cascaderFatherValue = "";
    },
    delWheel(transIndex) {
      if (this.contentDataList.length > 1) {
        this.contentDataList.splice(transIndex, 1);
      } else {
        this.$message({
          message: "当前轮播图至少【" + 1 + "】个",
          type: "error",
          duration: 2000,
        });
      }
    },
    modifyProduct(transIndex) {
      this.curSelIndex = transIndex;
      this.showChangeDialogVisible = true;
      this.propsActiveValue = {
        id: this.contentDataList[transIndex].id,
        type: this.contentDataList[transIndex].type,
        name: this.contentDataList[transIndex].name,
        childActiveName: this.contentDataList[transIndex].childActiveName,
        cascaderFatherValue: this.contentDataList[transIndex].cascaderFatherValue,
      };
    },
    heightChange() {
      this.data.height = this.height;
    },
  },
  computed: {
    coms: {
      get() {
        return this.$store.state.myList;
      },
      set(value) {
        this.$store.commit("updateList", value);
      },
    },
  },
};
</script>

中间显示轮播图组件代码：

<template>
  <div class="menuindex-topoption" @click="click(data)" :class="this.data.active?'active-class':''">
    <div class="module-swiperbox">
      <div class="module-swiperbox-swiper">
        <swiper
          class="swiper-swiper"
          v-if="swiperData && swiperData.length>0"
          :options="swiperOption"
          ref="swiper"
        >
          <swiper-slide v-for="(item,index) in this.swiperData" :key="`slide${index}`">
            <img :src="item.oriPic" :height="imgHeight" :width="imgWidth" alt/>
          </swiper-slide>
        </swiper>
        <swiper class="swiper-swiper" v-else :options="swiperOption" ref="swiper">
          <swiper-slide>
            <div style="height:193px;width:375px;background:gray;"></div>
          </swiper-slide>
        </swiper>
        <div class="swiper-pagination"></div>
      </div>
    </div>
  </div>
</template>
            
        
<script>
  import {Swiper, SwiperSlide} from 'vue-awesome-swiper'

  export default {
    name: 'showHomeMiddleWheelPic',
    props: ['data', 'click'],
    components: {
      Swiper,
      SwiperSlide
    },
    data() {
      return {
        swiperData: [],
        imgHeight: 0,
        imgWidth: 0,
        swiperOption: {
          speed: 800,
          loop: true,
          autoplay: true,
          pagination: {
            el: '.swiper-pagination',
            clickable: true
          }
        }
      }
    },

    created() {
      this.imgWidth = 375 + 'px';
      this.imgHeight = this.data.height + 'px';
      this.swiperData = this.data.data || []
    },
    watch: {
      data: {
        handler(newVal) {
          this.swiperData = newVal.data || []
          this.imgHeight = newVal.height + 'px';
        },
        deep: true
      }
    }
  }
</script>

<style scoped lang="scss">
  .active-class {
    border: 2px solid blue;
    box-shadow: 2px 2px 5px #bbb;
  }

  .menuindex-topoption {
    // margin: 1% 40% 5%;
    width: 375px;
    background: #f3f4f6;
    display: flex;
    flex-direction: column;
    overflow: hidden;

    .module-swiperbox {
      // 轮播模式
      .module-swiperbox-swiper {
        // position: relative;
        width: 375px;
        background: #666;
        // border-radius: 8px;
        transform: translateY(0px);

        .swiper-swiper {
          width: 375px;
          height: 100%;
          position: relative;
          text-align: center;

          /deep/ .swiper-slide {
            width: 375px;
            height: 100%;
            overflow: hidden;
          }
        }

        .swiper-pagination {
          position: absolute;
          bottom: 0;
          left: 50%;
          transform: translate3d(-50%, 0, 0);

          /deep/ .swiper-pagination-bullet {
            margin: 0px 2px;
          }

          /deep/ .swiper-pagination-bullet-active {
            background: #fff;
          }
        }
      }
    }
  }
</style>

 

提示：拖拽插件可在百度上搜索具体用法