vue 实战 区域内小组件元素拖拽 示例

<template>
    <div>
      <el-button type="primary" @click="showDialog = true">快捷布局</el-button>
      <el-dialog title="快捷布局配置" :visible.sync="showDialog">
        <el-row :gutter="20">
          <el-col>
            <el-card class="box-card" header="开始面板引流区">
              <draggable tag="div" class="buttons-container" v-model="drainComponents" >
                <el-button v-for="component in drainComponents" 
                           :key="component.comId" 
                           class="button" 
                           :style="{ backgroundColor: component.color }">
                  <div class="button-content">
                    <div>{{ component.name }}</div>
                    <div class="component-id">{{ component.comId }}</div>
                  </div>
                </el-button>
              </draggable>
            </el-card>
          </el-col>
          <el-col>
            <el-card class="box-card" header="开始面板数据区">
              <draggable tag="div" class="buttons-container" v-model="dataComponents" >
                <el-button v-for="component in dataComponents" 
                           :key="component.comId" 
                           class="button" 
                           :style="{ backgroundColor: component.color }">
                  <div class="button-content">
                    <div>{{ component.name }}</div>
                    <div class="component-id">{{ component.comId }}</div>
                  </div>
                </el-button>
              </draggable>
            </el-card>
          </el-col>
          <el-col>
            <el-card class="box-card" header="生活中默认区域">
              <draggable tag="div" class="buttons-container" v-model="liveComponents" >
                <el-button v-for="component in liveComponents" 
                           :key="component.comId" 
                           class="button" 
                           :style="{ backgroundColor: component.color }">
                  <div class="button-content">
                    <div>{{ component.name }}</div>
                    <div class="component-id">{{ component.comId }}</div>
                  </div>
                </el-button>
              </draggable>
            </el-card>
          </el-col>
        </el-row>
        <span slot="footer" class="dialog-footer">
          <el-button @click="showDialog = false">取消</el-button>
          <el-button type="primary" @click="saveLayout">确定</el-button>
        </span>
      </el-dialog>
    </div>
  </template>
  
  <script>
  import draggable from 'vuedraggable';
  
  // 生成柔和颜色的函数
  const generateSoftColor = () => {
    const hue = Math.floor(Math.random() * 360);
    const saturation = 60 + Math.random() * 20; // 饱和度在60%-80%之间
    const lightness = 70 + Math.random() * 20; // 亮度在70%-90%之间
    return `hsl(${hue}, ${saturation}%, ${lightness}%)`;
  };
  
  // 通用的转换函数
  const convertDataList = (dataList) => {
    return dataList.map(item => ({
      comId: item.comId,
      name: item.name,
      weight: item.weight,
      color: generateSoftColor()
    }));
  };

  const sortedDataList = (dataList) => {
    return dataList.slice().sort((a, b) => b.weight - a.weight);
  }
  
  // 数据列表
  const dataList1 = [
    { comId: '1000009', name: '对方如果', property: 0, type: 0, weight: 4 },
    { comId: '1000004', name: '辅导费人', property: 0, type: 0, weight: 1 },
    { comId: '1000010', name: '电电风扇', property: 0, type: 0, weight: 2 },
    { comId: '1000006', name: '小组件', property: 0, type: 0, weight: 3 },
    { comId: '1000007', name: '飒飒飒飒', property: 0, type: 0, weight: 5 },
    { comId: '1000011', name: '你说的分手', property: 0, type: 0, weight: 6 },
    { comId: '1000012', name: '大润发儿童', property: 0, type: 0, weight: 9 },
    { comId: '1000013', name: '大方的发过的', property: 0, type: 0, weight: 8 }
  ];
  
  const dataList2 = [
    { comId: '1000001', name: '哈哈哈', property: 0, type: 1, weight: 2 },
    { comId: '1000005', name: '测试组件名称', property: 0, type: 1, weight: 2 },
    { comId: '1000002', name: '啦啦啦', property: 1, type: 0, weight: 0 }
  ];
  
  const dataList3 = [
    { comId: '1000017', name: 'GV地方大幅度', property: 0, type: 0, weight: 3 },
    { comId: '1000016', name: '奋斗奋斗发的', property: 0, type: 0, weight: 2 },
    { comId: '1000008', name: '大幅度发', property: 0, type: 0, weight: 1 },
    { comId: '1000003', name: '似懂非懂发', property: 1, type: 1, weight: 0 },
    { comId: '1000014', name: '个人发一个发帖人', property: 0, type: 0, weight: 0 },
    { comId: '1000015', name: '会更好多说点', property: 0, type: 0, weight: 0 }
  ];
  
  export default {
    components: { draggable },
    data() {
      return {
        showDialog: false,
        drainComponents: convertDataList(sortedDataList(dataList1)),
        dataComponents: convertDataList(sortedDataList(dataList2)),
        liveComponents: convertDataList(sortedDataList(dataList3))
      };
    },
    methods: {
      generateSoftColor,
      convertDataList,
      removeColorSet(data) {
        for(let i=0;i<data.length;i++){
          delete data[i].color;
        }
        return data
      },
      updateWeights(data) {
        for(let i=0;i<data.length;i++) {
            data[i].weight = data.length - i;
        }
        return data
      },
      saveLayout() {
        this.showDialog = false;
        this.drainComponents = this.updateWeights(this.drainComponents)
        this.dataComponents = this.updateWeights(this.dataComponents)
        this.liveComponents = this.updateWeights(this.liveComponents)
        this.printComponentVal();
        
        // Remove 'color' field from each dictionary
        // this.drainComponents = this.removeColorSet(this.drainComponents)
        // console.log("this.drainComponents", this.drainComponents)

        // this.dataComponents = this.removeColorSet(this.dataComponents)
        // console.log("this.dataComponents", this.dataComponents)

        // this.liveComponents = this.removeColorSet(this.liveComponents)
        // console.log("this.liveComponents", this.liveComponents)
      },
      printComponentVal() {
        console.log("this.drainComponents", this.drainComponents)
        console.log("this.dataComponents", this.dataComponents)
        console.log("this.liveComponents", this.liveComponents)
      },
      
    }
  };
  </script>
  
  <style scoped>
  .box-card {
    margin-bottom: 20px;
  }
  
  .buttons-container {
    display: flex;
    flex-wrap: wrap;
  }
  
  .button {
    margin: 5px;
    flex: 0 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  
  .button-content {
    text-align: center;
  }
  
  .component-id {
    font-size: 0.8em;
    color: #666;
  }
  
  .buttons-container .button:first-child {
    margin-left: 10px;
  }
  </style>

原文地址：https://blog.csdn.net/weixin_41987016/article/details/140631479

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！