Skip to content
On this page

禁用拖曳/缩放

disabled-dragdisabled-resize可以使所有元素禁用拖曳和缩放,使整个布局只用来展示。

vue
<template>
  <GridLayout
    v-model="layout"
    disabled-drag
    disabled-resize
  >
    <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: 1, h: 2 },
])
</script>