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>