split: 0.5 在vue3中的写法

在Vue 3中，可以使用`<script setup>`语法来简化Vue组件的写法。使用该语法时，可以使用`defineExpose`和`defineProps`函数来暴露组件的属性和方法，而不必再使用Vue 2中的`props`和`emits`选项。

在这种情况下，可以使用`ref`来获取拖动条的位置，然后使用`onUpdate:modelValue`指令来更新分割线的位置。

以下是一个使用Vue 3写法的示例代码：

<template>
  <div class="split-container">
    <div class="split-panel" :style="{ width: leftWidth }">
      <!-- 左侧内容 -->
      <slot name="left"></slot>
    </div>
    <div class="split-bar" ref="splitBar" @mousedown="dragStart"></div>
    <div class="split-panel" :style="{ width: rightWidth }">
      <!-- 右侧内容 -->
      <slot name="right"></slot>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const splitBar = ref(null)
const leftWidth = ref('50%')
const rightWidth = ref('50%')

function dragStart(event) {
  const startX = event.pageX
  const startLeftWidth = splitBar.value.previousElementSibling.offsetWidth
  const startRightWidth = splitBar.value.nextElementSibling.offsetWidth
  document.addEventListener('mousemove', dragMove)
  document.addEventListener('mouseup', dragEnd)
  function dragMove(event) {
    const diffX = event.pageX - startX
    leftWidth.value = startLeftWidth + diffX + 'px'
    rightWidth.value = startRightWidth - diffX + 'px'
  }
  function dragEnd() {
    document.removeEventListener('mousemove', dragMove)
    document.removeEventListener('mouseup', dragEnd)
  }
}
</script>

<style scoped>
.split-container {
  display: flex;
  height: 100%;
  position: relative;
}

.split-panel {
  height: 100%;
  overflow: auto;
  flex: 1;
}

.split-bar {
  width: 6px;
  height: 100%;
  position: absolute;
  left: calc(50% - 3px);
  top: 0;
  cursor: ew-resize;
  background-color: #ddd;
}
</style>

在这个示例中，我们使用`ref`函数来创建一个名为`splitBar`的引用，然后使用`@mousedown`指令来绑定`dragStart`方法。在`dragStart`方法中，我们监听鼠标的移动事件，并在移动过程中更新左侧和右侧容器的宽度，最后在鼠标抬起时移除事件监听器。

在模板中，我们使用`:style`指令来动态设置左侧和右侧容器的宽度，并使用`<slot>`标签来分别插入左侧和右侧内容。在样式中，我们使用`flex`布局来实现两个容器的自适应布局，使用`position: absolute`来定位分割线，然后使用`background-color`来设置分割线的颜色。