需求如下
可通过调整不同的模块,让不同的结构显示在不同的地方
说明如下
1.拖动使用vue-draggable插件
官方文档:www.npmjs.com/package/vue…
民间文档1:www.jianshu.com/p/e8ff1e1ca…
民间文档2:www.itxst.com/vue-draggab…
2.拖动的具体代码
<template>
<!-- 调整模块顺序 -->
<div class="container">
<div class="drag">
<div class="drag_top">
<div class="old">{{ title }}</div>
<div class="move">拖动以调整顺序</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()">取消</div>
<div class="finish" @click="handleSubmit">完成</div>
</div>
</div>
</div>
</template>
<script>
import draggable from "vuedraggable";
import {postRequest} from '../../../api/myAxios.js'
export default {
//注册draggable组件
components: {
draggable,
},
data() {
return {
drag: false,
homePageSortList: [ //定义要被拖拽对象的数组
// {customerType: 0, modelName: "功能专区", modelId: 106, sortNum: 0},
// {customerType: 0, modelName: "主推活动", modelId: 106, sortNum: 1},
// {customerType: 0, modelName: "热门商品", modelId: 106, sortNum: 2},
// {customerType: 0, modelName: "本地优惠", modelId: 106, sortNum: 3},
// {customerType: 0, modelName: "加班卡", modelId: 106, sortNum: 4}
],
title: "",
};
},
created() {
let id = this.$route.query.id
if (id == 1) {
this.title = "新客户";
} else if (id == 0) {
this.title = "老客户";
} else {
this.title = "白名单";
}
// 拉取数据
this.getModuleList()
},
methods: {
//开始拖拽事件
onStart() {
this.drag = true;
},
//拖拽结束事件
onEnd() {
this.drag = false;
for(var i=0, j=this.homePageSortList.length;i<j;i++){
this.homePageSortList[i].sortNum=i
}
},
// 获取数据
getModuleList(){
postRequest('/getAdjustModule').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>
3.依据数据来对结构显示在不同位置
1、personalCard.vue -- 个人名片组件
2、FunctionCom.vue,ActivityCom.vue,HotGoods.vue,Discount.vue,AddCard.vue --这几个组件是显示结构的组件(其实就是结构在原来位置封装而成)
3.我们需要使用动态组件,通过数组中对象的不同而显示在不同的位置
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";
// 组件注册
components: {
FunctionCom,
ActivityCom,
HotGoods,
Discount,
AddCard
},
<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>
<!-- 调整各模块顺序 -->
<div class="adjust">
<div class="adjust_txt">前往调整各模块展示顺序</div>
<img src="@/assets/images/home/slice_new.png" class="slice_pic" @click="handleAdjustZone"/>
</div>
<!-- 动态组件 组件会在item.modelName改变时改变 item.name的值可以为已注册组件的名字或一个组件的选项对象 -->
<component :is="item.name" v-for='(item,index) in homeList' :key="index"> </component>
</div>
</div>
</template>
// 卡片的list 其中sortNum是用于排序的 modelName是模块名 name是组件名 customerType表示客户类型
homeList:[
{customerType: 0, modelName: "功能专区", name:"FunctionCom", modelId: 220, sortNum: 0},
{customerType: 0, modelName: "主推活动", name:"ActivityCom",modelId: 14, sortNum: 1},
{customerType: 0, modelName: "热门商品", name:"HotGoods",modelId: 124, sortNum: 2},
{customerType: 0, modelName: "本地优惠", name:"Discount",modelId: 454, sortNum: 3},
{customerType: 0, modelName: "加办卡", name:"AddCard",modelId: 8653, sortNum: 4}
]
所以现在只需要调整homeList数组中对象的不同,那么就可以让结构显示在不同的位置,进而达到需求
截图如下: