元素的最小尺寸

通过设置min-w和min-h可以限制缩放的最小尺寸。

WARNING

由于没有实现布局自动纠正，如果初始化时布局元素的尺寸小于等于最小尺寸仍然会正常显示。

vue

<template>
  <GridLayout
    v-model="layout"
    :min-w="2"
    :min-h="1"
  >
    <span
      key="a"
      class="grid-item"
    >a</span>
    <span
      key="b"
      class="grid-item"
    >b</span>
    <span
      key="c"
      class="grid-item"
    >c</span>
  </GridLayout>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { GridLayout } from 'free-dom'

const layout = ref([
  { i: 'a', x: 0, y: 0, w: 1, h: 2 },
  { i: 'b', x: 1, y: 0, w: 3, h: 2 },
  { i: 'c', x: 4, y: 0, w: 2, h: 2 },
])
</script>

元素的最小尺寸 ​

元素的最小尺寸