Viog UI

伸缩盒子 flex 待新增功能

可以自拖拉更改长宽度的盒子

WARNING

此组件为功能性组件，样式需自行调控

使用说明

简单引入

通过为flex组件定义--vi-flex-default-width系列css变量，调控盒子默认与最大最小长宽

展开代码
<template>
    <vi-flex class="my-flex flex-box"></vi-flex>
</tempalte>

<style>
   .my-flex {
        --vi-flex-default-width: 60px;
        --vi-flex-default-height: 100px;
        --vi-flex-min-width: 20px;
        --vi-flex-max-width: 100px;
        --vi-flex-min-height: 20px;
        --vi-flex-max-height: 100px;
    }

    .flex-box {
        box-shadow: inset 0 0 0 1px var(--vi-background-color-deep);
    }
</style>

颜色

你可以通过调控--vi-flex-drag-active-colorcss变量来改变拖拽高亮部分颜色

展开代码
<template>
    <vi-flex class="my-flex flex-box light-green"></vi-flex>
</template>

<style>
.light-green {
    --vi-flex-drag-active-color: var(--vi-green-color3);
}
</style>

方向

组件默认的拉伸方向为底部与右侧，可以通过调控horizontal与vertical属性来控制拉伸方向

将对应值置为'none'，取消拉伸功能，此时css变量响应min与max失效

展开代码
<template>
  <!-- 此组件父盒子为justify-content属性为space-between的flex盒子 -->
  <vi-flex class="my-flex flex-box flex-box-bottom" horizontal="top" vertical="none"></vi-flex>
  <vi-flex class="my-flex flex-box" horizontal="none" vertical="left"></vi-flex>
</template>

<style>
.flex-box-bottom {
    align-self: flex-end;
}
</style>

Props

值为none即为取消拖动

属性名描述类型默认值

插槽

插槽名描述有无默认内容

可覆写css变量

变量名描述默认值