X-Next

Appearance

ResizeBox 可调整区域 ​

用于需要拖拽改变尺寸的面板、侧栏或编辑器区域。

基础用法 ​

拖动右侧或底部边缘
vue
<template>
  <x-resize-box
    v-model:width="width"
    v-model:height="height"
    :max-width="520"
    :max-height="260"
    :directions="['right', 'bottom']"
    class="demo-resize-box"
  >
    拖动右侧或底部边缘
  </x-resize-box>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const width = ref(260);
const height = ref(120);
</script>

受控尺寸 ​

280 x 140
vue
<template>
  <x-space>
    <x-button @click="width = 240">宽 240</x-button>
    <x-button @click="width = 320">宽 320</x-button>
    <x-button @click="height = 120">高 120</x-button>
    <x-button @click="height = 180">高 180</x-button>
  </x-space>
  <x-resize-box
    v-model:width="width"
    v-model:height="height"
    :max-width="520"
    :max-height="260"
    :directions="['right', 'bottom']"
  >
    {{ width }} x {{ height }}
  </x-resize-box>
</template>

尺寸限制 ​

宽度 200-360，高度 100-220
vue
<template>
  <x-resize-box
    v-model:width="width"
    v-model:height="height"
    :min-width="200"
    :max-width="360"
    :min-height="100"
    :max-height="220"
    :directions="['right', 'bottom']"
  >
    宽度 200-360，高度 100-220
  </x-resize-box>
</template>

四方向拖拽 ​

四个方向均可拖拽
vue
<template>
  <x-resize-box
    v-model:width="width"
    v-model:height="height"
    :max-width="520"
    :max-height="260"
    :directions="['left', 'right', 'top', 'bottom']"
  >
    四个方向均可拖拽
  </x-resize-box>
</template>

自定义触发杆 ​

自定义触发内容
vue
<template>
  <x-resize-box
    v-model:width="width"
    v-model:height="height"
    :max-width="520"
    :max-height="260"
    :directions="['right', 'bottom']"
  >
    自定义触发内容
    <template #resize-trigger="{ direction }">
      <div class="demo-resize-trigger">
        {{ direction === 'right' ? '拖动' : '调整高度' }}
      </div>
    </template>
  </x-resize-box>
</template>

自定义触发图标 ​

自定义图标
vue
<template>
  <x-resize-box :width="260" :height="120" :max-width="520" :directions="['right']">
    自定义图标
    <template #resize-trigger-icon="{ direction }">
      <span>{{ direction === 'right' ? '⋮' : '⋯' }}</span>
    </template>
  </x-resize-box>
</template>

拖拽事件 ​

查看事件日志
vue
<template>
  <x-resize-box
    v-model:width="width"
    v-model:height="height"
    :max-width="520"
    :max-height="260"
    :directions="['right', 'bottom']"
    @moving-start="pushLog('开始拖拽')"
    @moving="(size) => pushLog(`拖拽中：${size.width} x ${size.height}`)"
    @moving-end="pushLog('结束拖拽')"
  >
    查看事件日志
  </x-resize-box>
</template>

配合 LayoutSidebar ​

可调整侧栏
内容区域
vue
<template>
  <x-layout>
    <x-layout-sidebar :width="220" :resize-directions="['right']">
      可调整侧栏
    </x-layout-sidebar>
    <x-layout-content>内容区域</x-layout-content>
  </x-layout>
</template>

按需导入 ​

ts
import { ResizeBox } from 'x-next';

Props ​

参数说明类型默认值
width宽度number-
height高度number-
minWidth最小宽度number0
maxWidth最大宽度number-
minHeight最小高度number0
maxHeight最大高度number-
component渲染的 HTML 标签string'div'
directions可拖拽方向Array<'left' | 'right' | 'top' | 'bottom'>['right']

Events ​

事件名说明回调参数
update:width宽度变化时触发width: number
update:height高度变化时触发height: number
moving-start拖拽开始时触发event: MouseEvent
moving拖拽或键盘调整中触发{ width, height }, event
moving-end拖拽结束时触发event: MouseEvent

Slots ​

插槽名说明参数
default内容-
resize-trigger自定义拖拽杆内容{ direction }
resize-trigger-icon自定义拖拽杆图标{ direction }