ResizeBox 伸缩框

代码演示

基础用法

<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>

<script setup></script>

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

受控的高宽

<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>

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

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

<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