Requirements are as follows

You can adjust different modules so that different structures are displayed in different places

Stated below

1. Drag to use vue-draggable

The official document: www.npmjs.com/package/vue…

Folk document 1:www.jianshu.com/p/e8ff1e1ca…

Folk Document 2: www.itxst.com/vue-draggab…

2. Drag specific code

<template> <! <div class="drag"> <div class="drag_top"> <div class="old">{{title}}</div> <div Class=" move"> Drag to adjust the order </div> </div> <draggable V-model ="homePageSortList" chosenClass="chosen" forceFallback="true" group="people" animation="1000" @start="onStart" @end="onEnd" class="center" > <transition-group> <div class="item" v-for="element in homePageSortList" :key="element.sortNum"> <div class="text">{{ element.modelName }}</div> <img src="@/assets/images/home/adjust.png" alt="" class="pic" /> </div> </transition-group> </draggable> <div class="buttom"> <div class="cancel" @click="$router.back()"> Cancel </div> <div class="finish" @click="handleSubmit"> </div> </template> <script> import draggable from "vuedraggable"; import {postRequest} from '.. /.. /.. / API/myaxios.js' export default {// Register draggable components: {draggable,}, data() {return {drag: False, homePageSortList: [// Define an array of objects to be dragged // {customerType: 0, modelName: "Function zone ", modelId: 106, sortNum: 0}, / / {customerType: 0, modelName: "main activities", modelId: 106, sortNum: 1}, / / {customerType: 0, the modelName: "hits", modelId: // {customerType: 0, modelName: "local discount ", modelId: 106, sortNum: 3}, // {customerType: 0, modelName: 3}, "Overtime card", modelId: 106, sortNum: 4}], the title: ""}; }, created() {let id = this.$route.query.id if (id == 1) {this.title = "new client "; } else if (id == 0) {this.title = "old customer "; } else {this.title = "whitelist "; } // pull data this.getModulelist ()}, methods: {onStart() {this.drag = true; }, // drag end event onEnd() {this.drag = false; for(var i=0, j=this.homePageSortList.length; i<j; i++){ this.homePageSortList[i].sortNum=i } }, GetModuleList (){postRequest('/ AdjustModule'). Then (res=>{const homePageSortList = res.HomepAgesOrtList this.homePageSortList = homePageSortList console.log(homePageSortList) }) }, HandleSubmit (){postRequest('/getAdjustModule', this.homepagesortList). Then (res=>{console.log(res)})}},}; </script> <style lang="less" scoped> .container { background-color: #f3f5f9 ! important; .drag { .drag_top { display: flex; justify-content: space-between; align-items: center; height: 45px; padding: 0 20px; .old { font-size: 16px; font-weight: 500; color: #333333; } .move { font-size: 13px; font-weight: 400; color: #999999; } } .item { display: flex; justify-content: space-between; align-items: center; padding: 0 20px; height: 48px; background-color: #fff; line-height: 48px; font-size: 14px; font-weight: 400; color: #333333; .pic { width: 18px; height: 13px; } .text { background-color: #eeeeee; width: 80px; height: 28px; line-height: 28px; text-align: center; } } .buttom { display: flex; position: fixed; width: 100%; bottom: 20px; justify-content: space-around; align-items: center; .cancel, .finish { width: 150px; height: 45px; border-radius: 23px; line-height: 45px; border: 1px solid #5185ff; text-align: center; } .cancel { font-size: 16px; font-weight: 500; color: #5084ff; background-color: #ffffff; } .finish { font-size: 16px; font-weight: 500; background-color: #5084ff; color: #ffffff; } } .center { background-color: #fff; } } } </style>Copy the code

3. Display the structure in different positions according to the data

1. Personalcard.vue — Personal business card component

2. Functioncom. vue, Activitycom. vue, HotGoods. Vue, discount. vue, addcard. vue — these components are components that display the structure (i.e. encapsulate the structure in its original location).

3. We need to use dynamic components that are displayed in different locations by objects in the array

import FunctionCom from ".. /homeModule/functionCom"; import ActivityCom from ".. /homeModule/activityCom.vue"; import HotGoods from ".. /homeModule/hotGoods.vue"; import Discount from ".. /homeModule/discount.vue"; import AddCard from ".. /homeModule/addCard.vue"; {FunctionCom, ActivityCom, HotGoods, Discount, AddCard},Copy the code
<template> <div class="personalCard"> <div class="wrapper"> <! <van-tabs V-model ="active" color="#466dff" @click="handleToggleItem"> <van-tab :title="item.name" :name="index" v-for="(item, index) in customList" :key="index"></van-tab> </van-tabs> <! Adjust_txt --> <div class="adjust"> <div class=" adjusting" src="@/assets/images/home/slice_new.png" class="slice_pic" @click="handleAdjustZone"/> </div> <! The value of item.name can be the name of a registered component or an option object for a component --> < Component :is="item.name" v-for='(item,index) in homeList' :key="index"> </component> </div> </div> </template>Copy the code

// list of cards where sortNum is used for sorting modelName is the module name and name is the component name customerType is the customerType

HomeList :[{customerType: 0, modelName: "FunctionCom", name:"FunctionCom", modelId: 220, sortNum: 0}, {customerType: 0 0, modelName: "Main activity ", name:"ActivityCom",modelId: 14, sortNum: 1}, {customerType: 0, modelName: "HotGoods", name:"HotGoods",modelId: 124, sortNum: 2}, {customerType: 0, modelName: "Discount", name:"Discount",modelId: 454, sortNum: 3}, {customerType: 0, modelName: "AddCard",modelId: 8653, sortNum: 4}]Copy the code

So now we just need to adjust the objects in the homeList array, so that we can display the structure in different places, and we can do that

Screenshot below: