vue3-grid-layout-picker v1.0.3

🎄 vue3-grid-layout

一个基于vue3+grid布局的网格拖拽布局，支持网格吸附、碰撞检测等。

⭐️ 功能一览

• 可拖拽
• 可调整大小
• 网格吸附
• 碰撞检测
• 兼容移动端（采用 pointer 事件编写，兼容移动端）

📦 安装

# 使用 npm
npm install vue3-grid-layout --save

# 使用 yarn
yarn add vue3-grid-layout -D

# 使用 pnpm
pnpm add vue3-grid-layout -D

💡 用法

引入

// main.ts
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import Vue3GrifLayout from 'vue3-grid-layout-picker'
import "vue3-grid-layout-drop/dist/style.css" // 引入组件样式
createApp(App).use(Vue3GrifLayout).mount('#app')

组件中使用

<template>
  <div class="layout-box">
        <grid-layout
            v-model:data="layout"
            @draggableStart="draggableStart"
            @draggableHandle="draggableHandle"
            @draggableEnd="draggableEnd"
            @remove="remove"
        >
          <grid-item v-for="item in layout" :key="item.id" :id="item.id">
              {{ item.id }}
          </grid-item>
      </grid-layout>
      <button @click="layout = []">改变</button>
  </div>
</template>

<script setup lang="ts">
import { Layout, LayoutItem } from 'vue3-grid-layout-drop/dist/Vue3GridLayout/types/index'
import { ref, watch } from 'vue';

const layout = ref([
  { id: '1', x: 1, y: 1, h: 1, w: 1 },
  { id: '2', x: 2, y: 1, h: 1, w: 1 },
  { id: '3', x: 3, y: 1, h: 1, w: 1 },
  { id: '4', x: 4, y: 1, h: 1, w: 1 },
  { id: '5', x: 1, y: 2, h: 1, w: 1 },
  { id: '6', x: 1, y: 3, h: 1, w: 1 },
  { id: '7', x: 1, y: 4, h: 1, w: 1 },
  { id: '8', x: 1, y: 5, h: 4, w: 1 },
  { id: '9', x: 2, y: 2, h: 1, w: 1 },
  { id: '10', x: 2, y: 3, h: 1, w: 1 },
  { id: '11', x: 2, y: 4, h: 1, w: 1 },
  { id: '12', x: 5, y: 5, h: 1, w: 2 },
])
// 验证更新数据是否正确
watch(layout, () => {
  console.log('数据更新', layout.value)
}, {deep: true})

const draggableStart = (id: string) => {
  console.log('拖拽开始', id)
}
const draggableHandle = (id: string, data: LayoutItem) => {
  console.log('拖拽中', id, data)
}
const draggableEnd = (data: Layout) => {
  console.log('拖拽结束', data)
}
const remove = (id: string) => {
  console.log('删除', id)
}
</script>
<style>
.layout-box {
  width: 1000px;
}
</style>

这里需要注意的一点是，在组件的外层或者组件本身需要指定宽度，不然宽度会计算为0

🎁 Apis

🔩 Props

GridLayout

interface LayoutItem {
    id: string,
    x: number,
    y: number,
    h: number,
    w: number
}
type Layout = LayoutItem[]

GridItem

🎍 插槽

🪢 事件