月度归档： 2025 年 2 月

<script setup lang="ts">
import { computed, onMounted, ref } from 'vue'
import { useMousePressed, useMouseInElement } from '@vueuse/core'

const containerRef = shallowRef()
const dividerRef = shallowRef()

const { pressed } = useMousePressed({ target: dividerRef, touch: false })
const { elementX } = useMouseInElement(containerRef)

const asideWidth = ref('300px')

watch(elementX, (newVal) => {
  console.log(newVal, pressed.value)
  if (!pressed.value) return
  if (newVal < 300) {
    asideWidth.value = '300px'
    return
  }
  asideWidth.value = `${Math.floor(newVal)}px`
})

</script>

<template>
<ElContainer v-show="panel === 'tree'" ref="containerRef" class="container">
      <ElAside class="aside"
        ></ElAside>
      <div ref="dividerRef" class="divider"></div>
      <ElMain class="main">
      </ElMain>
 </ElContainer>
<ElContainer v-show="panel === 'card'"> <BookCard :book="currentBook" /></ElContainer>
</template>
<style scoped lang="less">
.aside {
  width: v-bind('asideWidth');
}
.divider {
  flex: 0 0 4px;
  &:hover {
    background-color: var(--el-border-color);
    cursor: col-resize;
  }
  &:active {
    background-color: var(--el-border-color);
    cursor: col-resize;
  }
}
</style>

在flex容器(container)中横向排布侧边栏(aside)、分隔线(divider)和主要区域(main)通过useMousePressed获取分隔线上的鼠标按压状态，通过useMouseInElement获取容器内的鼠标移动状态，这些状态是响应式的侦听鼠标横向移动距离，仅当鼠标在分隔线按下（即拖拽）时，同步修改侧边栏宽度。

参考：流烨（链接：https://juejin.cn/post/7384242126429405225），相比调整了一下动态设置宽度的方式，改为width: v-bind(‘asideWidth’)，同时，优化.divider的样式，增加hover，让它平时隐藏，鼠标滑过时显示更容易寻找。

正如tests/storage/annotations/OpenApi/L5SwaggerAnnotationsExampleServer.php所示：

<?php

namespace Tests\storage\annotations\OpenApi;

/**
 *  @OA\Server(
 *      url=L5_SWAGGER_CONST_HOST,
 *      description="L5 Swagger OpenApi dynamic host server"
 *  )
 *
 *  @OA\Server(
 *      url="https://projects.dev/api/v1",
 *      description="L5 Swagger OpenApi Server"
 * )
 */
class L5SwaggerAnnotationsExampleServer
{
}

L5_SWAGGER_CONST_HOST是作为一个变量直接引用的，这个变量在.env中设置，在实际项目中，尤其是多实例部署的产品，优先考虑用这种方法，而其中第二个是直接写死的地址，这种更适合相对固定的内部测试或者官方接口站点作为对照。实际上，api/doc还会依据L5_SWAGGER_BASE_PATH自动加载一个相对的接口地址，这个更适合用在调试环境，启动端口有可能会变，而且多个开发者的配置也不一定一致。L5_SWAGGER_CONST_HOST和L5_SWAGGER_BASE_PATH之间是相对独立的，可以搜索一下l5-swagger源代码看看逻辑，可惜这一点在l5-swagger的文档中说的并不清楚。