首页拖拉拽排序和自由宽度demo实现

package-lock.json

@@ -23,7 +23,7 @@
         "vue-draggable-resizable": "^2.2.0",
         "vue-i18n": "^8.26.7",
         "vue-router": "^3.2.0",
-        "vuedraggable": "^2.24.1",
+        "vuedraggable": "^2.24.3",
         "vuex": "^3.4.0"
       },
       "devDependencies": {

package.json

@@ -26,7 +26,7 @@
     "vue-draggable-resizable": "^2.2.0",
     "vue-i18n": "^8.26.7",
     "vue-router": "^3.2.0",
-    "vuedraggable": "^2.24.1",
+    "vuedraggable": "^2.24.3",
     "vuex": "^3.4.0"
   },
   "engines": {

src/routers/index.js

@@ -51,7 +51,7 @@ export const routes = [
         component: Layout,
         redirect: "/home",
         children: [
-            { path: 'home', component: () => import('~/views/Home'), name: 'Home', meta: { title: '首页', icon: 'el-icon-s-home', affix: true } },
+            { path: 'home', component: () => import('~/views/Home/index1.vue'), name: 'Home', meta: { title: '首页', icon: 'el-icon-s-home', affix: true } },
             { path: 'taskList', component: () => import('~/views/TaskList'), name: 'TaskList', meta: { title: '任务列表', icon: 'el-icon-s-claim', affix: true } },
         ],
     },

src/views/Home/cells/CustomerAnalyse.vue

 <template>
-  <CellWrapper title="大客户分析" :cellContentHeight="cellContentHeight">
+  <CellWrapper title="大客户分析">
     <template v-slot:header>
       <span class="el-icon-refresh" title="刷新"></span>
       <span class="el-icon-more" title="操作"></span>
@@ -24,7 +24,6 @@ import { busvolume, finamount, expincome } from "~/service/report";
 
 export default {
   name: "CustomerAnalyse",
-  props: ["cellContentHeight"],
   components: { CellWrapper },
   data() {
     return {

src/views/Home/cells/Hall.vue

 <template>
-    <CellWrapper title="电子大厅" :cellContentHeight="cellContentHeight">
+    <CellWrapper title="电子大厅">
       <template v-slot:header>
         <span class="el-icon-refresh" title="刷新"></span>
         <span class="el-icon-more" title="操作" ></span> 
@@ -66,7 +66,6 @@ import { fund } from "~/service/elec";
 
 export default {
   name: "Hall",
-   props: ['cellContentHeight'],
   components: { CellHeader,CellWrapper},
   data() {
     return {

src/views/Home/cells/NoticeAnnouncement.vue

 <template>
-  <CellWrapper title="通知公告" :cellContentHeight="cellContentHeight">
+  <CellWrapper title="通知公告">
     <template v-slot:header>
       <span class="el-icon-refresh" title="刷新"></span>
       <span class="el-icon-more" title="操作" @click="opening"></span>
@@ -31,7 +31,6 @@ import CellWrapper from "../common/CellWrapper.vue";
 
 export default {
   name: "NoticeAnnouncement",
-  props: ["cellContentHeight"],
   components: { CellWrapper },
   data() {
     return {

src/views/Home/cells/QuickSearch.vue

 <template>
-  <CellWrapper title="快速查询" :cellContentHeight="cellContentHeight">
+  <CellWrapper title="快速查询">
     <template v-slot:header>
       <span class="el-icon-setting" title="设置" @click="openSetting"></span>
     </template>
@@ -7,7 +7,6 @@
     <quick
       ref="quick"
       quickType="search"
-      :cellContentHeight="cellContentHeight"
     ></quick>
   </CellWrapper>
 </template>
@@ -21,12 +20,6 @@ import defaultQuickSearchItems from "../common/defaultQuickSearchItems.js";
 export default {
   name: "QuickSearch",
   components: { CellWrapper, quick },
-  props: {
-    cellContentHeight: {
-      type: Number,
-      required: true,
-    },
-  },
   created() {
     const admin = localStorage.getItem("quick-search-admin");
     if (!admin) {

src/views/Home/cells/QuickVisit.vue

 <template>
-  <CellWrapper title="快速访问" :cellContentHeight="cellContentHeight">
+  <CellWrapper title="快速访问">
     <template v-slot:header>
       <span class="el-icon-setting" title="设置" @click="openSetting"></span>
     </template>
@@ -7,7 +7,6 @@
     <quick
       ref="quick"
       quickType="visit"
-      :cellContentHeight="cellContentHeight"
     ></quick>
   </CellWrapper>
 </template>
@@ -21,12 +20,6 @@ import defaultVisitItems from "../common/defaultQuickVisitItems.js";
 export default {
   name: "QuickVisit",
   components: { CellWrapper, quick },
-  props: {
-    cellContentHeight: {
-      type: Number,
-      required: true,
-    },
-  },
   created() {
     const admin = localStorage.getItem("quick-visit-admin");
     if (!admin) {

src/views/Home/cells/TaskStatistics.vue

 <template>
-  <CellWrapper title="任务统计" :cellContentHeight="cellContentHeight">
+  <CellWrapper title="任务统计">
     <template v-slot:header>
       <span class="el-icon-refresh" title="刷新"></span>
       <!-- <span class="el-icon-more" title="操作"></span> -->
@@ -55,7 +55,6 @@ import { all,my,ins } from "~/service/report";
 
 export default {
   name: "TaskStatistics",
-  props: ["cellContentHeight"],
   components: { CellWrapper },
   data() {
     return {

src/views/Home/common/CellWrapper.vue

@@ -3,7 +3,7 @@
     <CellHeader :title="title">
       <slot name="header"></slot>
     </CellHeader>
-    <div class="cell-content" :style="{ height: cellContentHeight + 'px' }">
+    <div class="cell-content">
       <slot></slot>
     </div>
   </div>
@@ -20,10 +20,6 @@ export default {
       type: String,
       required: true,
     },
-    cellContentHeight: {
-      type: Number,
-      required: true,
-    },
   },
   data() {
     return {};
@@ -37,6 +33,8 @@ export default {
   box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
   border-radius: 8px;
   padding-bottom: 10px;
+  width: 100%;
+  height: 100%;
 }
 .home-cell::before {
   display: table;
@@ -46,4 +44,8 @@ export default {
   overflow-y: scroll;
   overflow-x: auto;
 }
+.cell-content {
+  height: calc(100% - 50px);
+  overflow: auto;
+}
 </style>
\ No newline at end of file

src/views/Home/common/quick.vue

@@ -59,7 +59,6 @@ export default {
     },
     cellContentHeight: {
       type: Number,
-      required: true,
     },
   },
   data() {

src/views/Home/index1.vue

+ 
+ 
+ <template>
+  <div>
+    <draggable class="home-wrap" v-model="layoutList" filter=".undraggable">
+        <div
+          class="cell-item"
+          :class="[canDrag === item.component ? 'unDraggable' : 'draggable']"
+          ref="cellItem"
+          v-for="(item, index) in layoutList"
+          :style="{'width': `calc((100% - 75px) * ${item.width / 100})`}"
+        >
+          <component
+            :is="item.component"
+          ></component>
+          <div class="move-tar-right" @mousedown.stop="(e) => handleMousedown(e, item, index)"></div>
+        </div>
+    </draggable>
+  </div>
+</template>
+<script>
+import QuickVisit from "./cells/QuickVisit.vue";
+import TaskStatistics from "./cells/TaskStatistics.vue";
+import NoticeAnnouncement from "./cells/NoticeAnnouncement.vue";
+import Hall from "./cells/Hall.vue";
+import CustomerAnalyse from "./cells/CustomerAnalyse.vue";
+import QuickSearch from "./cells/QuickSearch.vue";
+import draggable from "vuedraggable";
+export default {
+  name: 'Home',
+  components: {
+    QuickVisit,
+    TaskStatistics,
+    NoticeAnnouncement,
+    Hall,
+    CustomerAnalyse,
+    QuickSearch,
+    draggable,
+  },
+  computed: {
+    calcLayoutList () {
+      let list = []
+      let widthNum = 0
+      let col = 0
+      this.layoutList.map((item, index) => {{
+        if (widthNum <= 100 && (widthNum + item.width > 100)) {
+          widthNum = 0
+          col = 0
+          list.push({
+            ...item,
+            col: col
+          })
+        } else {
+          col++
+          list.push({
+            ...item,
+            col: col
+          })
+        }
+      }})
+      console.log('list', list)
+      return list
+    }
+  },
+  data () {
+    return {
+      disabledDrag: false,
+      layoutList: [
+        {
+          component: 'QuickVisit',
+          width: 33
+        },
+        {
+          component: 'TaskStatistics',
+          width: 33
+        },
+        {
+          component: 'NoticeAnnouncement',
+          width: 33
+        },
+        {
+          component: 'Hall',
+          width: 33
+        },
+        {
+          component: 'CustomerAnalyse',
+          width: 33
+        },
+        {
+          component: 'QuickSearch',
+          width: 33
+        },
+      ],
+      // 控制是否可以拖拽
+      canDrag: null,
+      index: 0,
+      clientWidth: 0,
+      startPos: 0
+    }
+  },
+  mounted () {
+    // 监听鼠标离开'home-wrap'的时候移除move的监听事件
+    document.querySelector('.home-wrap').addEventListener('mouseleave', () => {
+      console.log('leave')
+      document.removeEventListener('mousemove', this.handleMousemove)
+    })
+    // 监听鼠标从'home-wrap'上松开的时候移除move的监听事件
+    document.querySelector('.home-wrap').addEventListener('mouseup', () => {
+      console.log('up-')
+      this.disabledDrag = false
+      this.canDrag = null
+      document.removeEventListener('mousemove', this.handleMousemove)
+    })
+  },
+  methods: {
+    // 阻止默认事件
+    pauseEvent(e) {
+      if(e.stopPropagation) e.stopPropagation();
+      if(e.preventDefault) e.preventDefault();
+      e.cancelBubble=true;
+      e.returnValue=false;
+      return false;
+    },
+    // 鼠标按下时
+    handleMousedown (e, paramsData, index) {
+      console.log('mousedown', paramsData)
+      this.pauseEvent(e)
+      this.canDrag = paramsData.component
+      this.disabledDrag = true
+      this.clientWidth = this.$refs.cellItem[index].clientWidth
+      this.startPos = e.clientX
+      this.index = index
+      document.addEventListener('mousemove', this.handleMousemove)
+    },
+    // 鼠标move事件
+    handleMousemove (e) {
+      this.pauseEvent(e)
+      let nodeList = this.$refs.cellItem
+      let distance = e.clientX - this.startPos
+      nodeList[this.index].style.width = this.clientWidth + distance + 'px'
+    },
+  }
+}
+</script>
+<style scoped>
+.home-wrap {
+  width: 100%;
+  height: calc(100vh - 100px);
+  display: flex;
+  align-items: flex-start;
+  justify-content: flex-start;
+  flex-wrap: wrap;
+  overflow: auto;
+  padding: 16px;
+  box-sizing: border-box;
+  user-select: none;
+}
+.cell-item {
+  height: calc((100% - 50px) / 2);
+  margin-bottom: 25px;
+  margin-right: 25px;
+  position: relative;
+}
+.move-tar-right {
+  width: 10px;
+  height: 100%;
+  position: absolute;
+  right: 0;
+  top: 0;
+}
+.move-tar-right:hover {
+  cursor: col-resize;
+}
+</style>