前端页面结构可通过数据(数组)进行动态显示不同地方

196 阅读1分钟

需求如下

可通过调整不同的模块,让不同的结构显示在不同的地方

image.png

image.png

说明如下

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数组中对象的不同,那么就可以让结构显示在不同的位置,进而达到需求

截图如下:

image.png

image.png

image.png

image.png

image.png