基于vue将json绘制图_Vue的动态和基于JSON的网格布局

最新推荐文章于 2024-09-09 08:10:46 发布

cuk5340

最新推荐文章于 2024-09-09 08:10:46 发布

阅读量1.2k

点赞数

文章标签： vue js java html javascript ViewUI

原文链接：https://vuejsexamples.com/dynamic-and-json-based-grid-layout-for-vue/

版权

Vue布局composer是一个动态的，基于JSON的拖放式网格布局插件，适用于Vue。它允许您创建组件，指定JSON布局配置，以实现自定义的网格布局。用户可以编辑网格，通过监听事件保存布局配置，并通过组件属性进行交互。

摘要由CSDN通过智能技术生成

基于vue将json绘制图

Vue布局撰写者 (vue-layout-composer)

Dynamic, drag & drop, JSON-based grid layout for Vue.

Vue基于JSON的动态，拖放式网格布局。

Create your components, specify your JSON layout configuration and let the vue-layout-composer handle the rest.

创建您的组件，指定JSON布局配置，然后让vue-layout-composer处理其余部分。

安装 (Installation)

yarn add vue-layout-composer

要么

npm install vue-layout-composer --save

用法 (Usage)

Add the VueLayoutComposer plugin in your main.js
在您的main.js添加VueLayoutComposer插件

Vue.use(VueLayoutComposer)

Use the LayoutComposer component
使用LayoutComposer组件

<template>
  <div id="app">
    <layout-composer
      :displayComponents="displayComponents"
      :config="config"
      @change:config="onConfigChange"
    />
  </div>
</template>

<script>
import config from '../config/layout.json'
import 'vue-layout-composer/dist/vue-layout-composer.css'

import Item from './components/Item'

export default {
  name: 'app',
  data() {
    return {
      displayComponents: {
        'Item': Item,
      },
    }
  },
  methods: {
    onConfigChange(newConfig) {
      console.log(newConfig)
    },
  },
}
</script>

示例布局配置(JSON) (Example layout config (JSON))

{
  "component": "Layout",
  "props": {
    "orientation": "vertical"
  },
  "children": [
    {
      "component": "Layout",
      "props": {
        "orientation": "horizontal"
      },
      "children": [
        {
          "component": "Item",
          "display": {
            "weight": 1
          },
          "props": {
            "background": "#E6E7E8",
            "content": "This"
          },
          "hello": "world"
        },
        {
          "component": "Item",
          "display": {
            "weight": 2
          },
          "props": {
            "background": "#E6E7E8",
            "content": "is"
          },
          "hello": "world"
        },
        {
          "component": "Layout",
          "props": {
            "orientation": "ve