ResizeBox 伸缩框

代码演示

基础用法

<script setup></script>

<template>
  <x-resize-box
    :directions="['right', 'bottom']"
    :height="200"
    :style="{ textAlign: 'center' }"
    :width="500"
  >
    <a-typography-paragraph>We are building the future of content discovery and creation.</a-typography-paragraph>
    <a-divider />
    <a-typography-paragraph>
      ByteDance's content platforms enable people to enjoy content powered by AI technology. We inform, entertain,
      and inspire people across language, culture and geography.
    </a-typography-paragraph>
    <a-divider>ByteDance</a-divider>
    <a-typography-paragraph>Yiming Zhang is the founder and CEO of ByteDance.</a-typography-paragraph>
  </x-resize-box>
</template>

<style lang="less" scoped></style>

受控的高宽

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

const width = ref(500)
const height = ref(200)
</script>

<template>
  <x-resize-box
    v-model:height="height"
    v-model:width="width"
    :directions="['right', 'bottom']"
    :style="{ textAlign: 'center' }"
  >
    <a-typography-paragraph>We are building the future of content discovery and creation.</a-typography-paragraph>
    <a-divider />
    <a-typography-paragraph>
      ByteDance's content platforms enable people to enjoy content powered by AI technology. We inform, entertain,
      and inspire people across language, culture and geography.
    </a-typography-paragraph>
    <a-divider>ByteDance</a-divider>
    <a-typography-paragraph>Yiming Zhang is the founder and CEO of ByteDance.</a-typography-paragraph>
  </x-resize-box>

  <a-descriptions
    :column="1"
    class="mt-8-2"
  >
    <a-descriptions-item label="width">
      {{ width }}
    </a-descriptions-item>
    <a-descriptions-item label="height">
      {{ height }}
    </a-descriptions-item>
  </a-descriptions>
</template>

<style lang="less" scoped></style>

API

Props

名称	说明	类型	默认值
width(v-model)	宽	number	-
height(v-model)	高	number	-
component	容器标签	string	div
min-width	最小宽度	number string	100
min-height	最小高度	number string	100
max-width	最大宽度	number string	100%
max-height	最大高度	number string	-
directions	可以进行拖拽的边，可选：['left', 'right', 'top', 'bottom']	array	['right']
disabled	禁用	boolean	false

Events

事件名	说明	返回值
movingStart	拖拽开始	event
moving	拖拽中	event
movingEnd	拖拽结束	event