消息界面布局（侧边栏可拖动）

src/components/common/DragLine.vue

@@ -0,0 +1,117 @@
+<script setup>
+import { ref, onMounted, onUnmounted } from 'vue'
+const props = defineProps({
+  direction: { type: String },
+  min: { type: Number },
+  max: { type: Number },
+  originSize: { type: Number }
+})
+const emit = defineEmits(['dragUpdate'])
+
+const dragData = ref({ status: false, pageX: 0, pageY: 0, width: 0, height: 0 })
+const dragRef = ref()
+
+const onMouseUp = () => {
+  dragData.value.status = false
+}
+
+const onMouseDown = (e) => {
+  dragData.value = {
+    status: true,
+    pageX: e.pageX,
+    pageY: e.pageY,
+    width: ['left', 'right'].includes(props.direction) ? props.originSize : 0,
+    height: ['left', 'right'].includes(props.direction) ? 0 : props.originSize
+  }
+}
+
+const onMouseMove = (e) => {
+  if (!dragData.value.status) return
+
+  let width,
+    height = 0
+  switch (props.direction) {
+    case 'left':
+      width = dragData.value.width + dragData.value.pageX - e.pageX
+      break
+    case 'right':
+      width = dragData.value.width + e.pageX - dragData.value.pageX
+      break
+    case 'up':
+      height = dragData.value.height + dragRef.value.pageY - e.pageY
+      break
+    case 'down':
+      height = dragData.value.height + e.pageY - dragRef.value.pageY
+      break
+  }
+
+  if (width < props.min) width = props.min
+  if (width > props.max) width = props.max
+  if (height < props.min) height = props.min
+  if (height > props.max) height = props.max
+
+  emit('dragUpdate', { width: width, height: height })
+}
+
+onMounted(() => {
+  dragRef.value.addEventListener('mousedown', onMouseDown)
+  document.addEventListener('mouseup', onMouseUp)
+  document.addEventListener('mousemove', onMouseMove)
+})
+
+onUnmounted(() => {
+  dragRef.value.removeEventListener('mousedown', onMouseDown)
+  document.removeEventListener('mouseup', onMouseUp)
+  document.removeEventListener('mousemove', onMouseMove)
+})
+</script>
+
+<template>
+  <div
+    class="drag-line"
+    :class="['drag-line-' + props.direction, { drag_resizing: dragData.status }]"
+    ref="dragRef"
+  ></div>
+</template>
+
+<style lang="scss">
+.drag-line {
+  position: absolute;
+  cursor: col-resize;
+
+  &:hover,
+  &.drag_resizing {
+    background-color: #409eff;
+  }
+
+  &.drag-line-up {
+    top: 0;
+    left: 0;
+    height: 2px;
+    width: 100%;
+    cursor: row-resize;
+  }
+
+  &.drag-line-down {
+    bottom: 0;
+    left: 0;
+    height: 2px;
+    width: 100%;
+    cursor: row-resize;
+  }
+
+  &.drag-line-left {
+    left: 0;
+    top: 0;
+    width: 2px;
+    height: 100%;
+  }
+
+  &.drag-line-right {
+    right: 0;
+    top: 0;
+    width: 2px;
+    height: 100%;
+  }
+}
+</style>

src/views/message/MessageLayout.vue

@@ -1,3 +1,49 @@
-<script setup></script>
+<script setup>
+import { ref } from 'vue'
+import DragLine from '@/components/common/DragLine.vue'
 
-<template>消息</template>
+const asideRef = ref()
+const asideWidth = ref(250)
+const widthMin = 150
+const widthMax = 500
+
+const onDragUpdate = ({ width }) => {
+  console.log('width is ', width)
+  asideWidth.value = width
+}
+</script>
+
+<template>
+  <el-container class="msg-container-hole">
+    <el-aside class="msg-aside bdr-r" ref="asideRef" :style="{ width: asideWidth + 'px' }">
+      <div>
+        <div>搜索</div>
+        <div>会话列表</div>
+      </div>
+
+      <DragLine
+        direction="right"
+        :min="widthMin"
+        :max="widthMax"
+        :origin-size="asideWidth"
+        @drag-update="onDragUpdate"
+      ></DragLine>
+    </el-aside>
+
+    <el-main>
+      <div>聊天主体</div>
+    </el-main>
+  </el-container>
+</template>
+
+<style lang="scss">
+.msg-container-hole {
+  height: 100%;
+  user-select: none;
+
+  .msg-aside {
+    height: 100%;
+    position: relative;
+  }
+}
+</style>