Hy Layout

一个基于 Vue 3 的拖拽式页面构建器组件，支持网格布局和组件预览。

特性

• 🎯 拖拽式组件添加
• 📐 网格布局系统
• 👀 组件预览模式
• 🎨 响应式设计
• 📱 支持移动端
• 🔧 TypeScript 支持

安装

npm install hy-layout

重要： 使用前必须先导入样式文件！

// 在你的主入口文件中导入样式
import 'hy-layout/dist/style.css'

依赖

本组件依赖以下插件：

• grid-layout-plus: ^1.1.1

使用方法

基础用法

<template>
  <TeraBuilder
    :componentList="componentList"
    :isEdite="true"
    :layout="layout"
  />
</template>

<script setup>
import { TeraBuilder } from 'hy-layout'
// 重要：导入样式
import 'hy-layout/dist/style.css'

const componentList = [
  {
    name: 'MyComponent',
    loader: () => import('./MyComponent.vue')
  }
]

const layout = []
</script>

完整示例

<template>
  <div>
    <TeraBuilder
      :componentList="componentList"
      :isEdite="isEditMode"
      :layout="currentLayout"
      ref="builderRef"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { TeraBuilder } from 'hy-layout'
// 重要：导入样式
import 'hy-layout/dist/style.css'

const isEditMode = ref(true)
const currentLayout = ref([])
const builderRef = ref()

const componentList = [
  {
    name: 'Button',
    loader: () => import('./components/Button.vue')
  },
  {
    name: 'Card',
    loader: () => import('./components/Card.vue')
  },
  {
    name: 'Text',
    loader: () => import('./components/Text.vue')
  }
]

// 获取当前布局
const getLayout = () => {
  return builderRef.value?.layout
}
</script>

使用demo2

<script setup lang="ts">
import { TeraBuilder } from 'hy-layout'
import 'hy-layout/dist/style.css'
import {ref} from "vue";
function outData(){
  console.log(tool.value.layout)
}
function backUpData(){
  tool.value.layout=[]
}
const layout:any = ref([])

//此处填写代理组件路径，会自动获取该路径下全部vue文件
const modules = import.meta.glob('@/views/comp/*.vue', { eager: true })
const componentList = Object.keys(modules).map(path => ({
  name: path.split('/').pop()!.replace('.vue', ''),
  loader: () => Promise.resolve(modules[path].default)
}))

const tool:any=ref(null)
let isEdite=ref(true)
</script>

<template>
  <el-button @click="outData">导出数据</el-button>
  <el-button @click="backUpData">数据恢复</el-button>
  是否编辑：
  <el-switch v-model="isEdite"/>
  <TeraBuilder ref="tool" :layout="layout" :isEdite="isEdite" :componentList="componentList" />
</template>

<style scoped>

</style>

API

TeraBuilder Props

| 参数 | 类型 | 默认值 | 说明 | |------|------|--------|------| | componentList | ComponentItem[] | [] | 组件列表 | | isEdite | boolean | false | 是否可编辑 | | layout | LayoutItem[] | [] | 初始布局 |

ComponentItem

interface ComponentItem {
  name: string
  loader: () => Promise<any>
}

LayoutItem

interface LayoutItem {
  x: number
  y: number
  w: number
  h: number
  i: string
  useProps: {
    compName: string
  }
}

组件说明

TeraBuilder

主要的页面构建器组件，提供拖拽和布局功能。

许可证

MIT