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

于 2020-07-30 17:29:29 发布
阅读量1.3k 收藏 1
点赞数
文章标签： vue js java html javascript ViewUI
原文链接：https://vuejsexamples.com/dynamic-and-json-based-grid-layout-for-vue/
版权
Vue布局composer是一个动态的，基于JSON的拖放式网格布局插件，适用于Vue。它允许您创建组件，指定JSON布局配置，以实现自定义的网格布局。用户可以编辑网格，通过监听事件保存布局配置，并通过组件属性进行交互。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

基于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处理其余部分。

vue-layout-composer

安装 (Installation)

yarn add vue-layout-composer

yarn add vue-layout-composer

OR

要么

npm install vue-layout-composer --save

npm install vue-layout-composer --save

用法 (Usage)

  1. Add the VueLayoutComposer plugin in your main.js

    在您的main.js添加VueLayoutComposer插件 

Vue.use(VueLayoutComposer)

  1. 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": "vertical"
          },
          "children": [
            {
              "component": "Item",
              "display": {
                "weight": 1
              },
              "props": {
                "background": "#E6E7E8",
                "content": "and"
              },
              "hello": "world"
            },
            {
              "component": "Item",
              "display": {
                "weight": 1
              },
              "props": {
                "background": "#E6E7E8",
                "content": "vertical."
              },
              "hello": "world"
            }
          ]
        },
        {
          "component": "Item",
          "display": {
            "weight": 1
          },
          "props": {
            "background": "#E6E7E8",
            "content": "horizontal."
          },
          "hello": "world"
        }
      ]
    },
    {
      "component": "Item",
      "props": {
        "background": "#E6E7E8",
        "content": "This"
      },
      "hello": "world"
    },
    {
      "component": "Item",
      "display": {
        "weight": 1
      },
      "props": {
        "background": "#E6E7E8",
        "content": "horizontal."
      },
      "hello": "world"
    },
    {
      "component": "Layout",
      "props": {
        "orientation": "horizontal"
      },
      "children": [
        {
          "component": "Item",
          "display": {
            "weight": 1
          },
          "props": {
            "background": "#E6E7E8",
            "content": "This"
          },
          "hello": "world"
        },
        {
          "component": "Item",
          "display": {
            "weight": 1
          },
          "props": {
            "background": "#E6E7E8",
            "content": "is"
          },
          "hello": "world"
        }
      ]
    },
    {
      "component": "Item",
      "props": {
        "background": "#E6E7E8",
        "content": "is"
      },
      "hello": "world"
    },
    {
      "component": "Item",
      "props": {
        "background": "#E6E7E8",
        "content": "vertical."
      },
      "hello": "world"
    }
  ]
}

道具 (Props)

displayComponents (必需) (displayComponents (required))

Used to register your local components in the grid system context. Just specify the object with following structure:

用于在网格系统上下文中注册本地组件。 只需使用以下结构指定对象： 

{
  'Item': Item,
  'OtherComponent': OtherComponent,
}

And you'll be able to write "component": "Item" and "component": "OtherComponent" in your layout config JSON and vue-layout-composer will understand which components you want to use.

而且，您将可以在布局配置JSON中写入"component": "Item"和"component": "OtherComponent" ，并且vue-layout-composer将了解您要使用的组件。

config (必填) (config (required))

Your layout config JSON, used to structure the grid.

您的布局配置JSON，用于构造网格。

editable (editable)

Add if you want to be able to edit the grid (drag & drop).

如果您希望能够编辑网格(拖放)，则添加。

大事记 (Events)

change:config (change:config)

Triggered when the layout is locked ('Save' button is clicked).

当布局锁定(单击“保存”按钮)时触发。

Returns the updated layout config JSON.

返回更新的布局配置JSON。

You could send an API request to save the layout config data and load it whenever you want. Or save the config in local storage.

您可以发送API请求以保存布局配置数据并随时加载。 或将配置保存在本地存储中。

布局配置 (Layout config)

Layout config is a tree-based JSON structure with 2 main parts:

布局配置是一个基于树的JSON结构，包含2个主要部分：

  1. Layout nodes

    布局节点

  2. Component nodes

    组件节点

There always needs to be one root layout node.

始终需要一个根布局节点。

布局节点 (Layout nodes)

{
  "component": "Layout",
  "props": {
    "orientation": "horizontal"
  },
  "children": [
    ...
  ]
}

Layout nodes are the ones that contain "component": "Layout". Layout is a built-in layout component in vue-layout-composer.

布局节点是包含"component": "Layout"节点。 布局是vue-layout-composer中的内置布局组件。

Layout nodes can be horizontal or vertical, which is specified in props.orientation attribute. The orientation specifies the direction the layout will put the components in.

布局节点可以是horizontal或vertical ，这在props.orientation属性中指定。 方向指定布局将放置组件的方向。

On mobile phones, layouts automatically change orientation to vertical.

在手机上，布局会自动将方向更改为vertical 。

They also contain children nodes in children attribute. The children nodes can be either layout nodes or component nodes.

它们还在children属性中包含子节点。 子节点可以是layout nodes或component nodes 。

组件节点 (Component nodes)

{
  "component": "YOUR_COMPONENT_NAME",
  "display": {
    "weight": 1
  },
  "props": {
    "background": "#E6E7E8",
    "content": "This"
  }
}

Component nodes are the ones you put your own Vue components in.

组件节点是您放置自己的Vue组件的节点。

Specify the component with "component": "YOUR_COMPONENT_NAME" and pass any props via the props attribute. Props are your Vue component props.

使用"component": "YOUR_COMPONENT_NAME"指定组件"component": "YOUR_COMPONENT_NAME"然后通过props属性传递所有props。 道具是您的Vue组件道具。

display属性 (display attribute)

Every node supports a display attribute.

每个节点都支持display属性。

At the moment only weight is supported. It can be thought of as the flex-grow CSS attribute.

目前仅支持weight 。 可以将其视为flex-grow CSS属性。

创建自定义组件 (Creating custom components)

You can add your custom components to the layout by following a few simple API rules.

您可以通过遵循一些简单的API规则将自定义组件添加到布局中。

规则 (Rules)

  1. Your component needs to have lc-cell component as the root element in template

    您的组件需要将lc-cell组件作为模板中的根元素

  2. Your component needs to receive following props:

    您的组件需要接收以下道具：

    • initialConfig - json config specific for the component from the provided json config in initialConfig - LayoutComposerLayoutComposer提供的json配置中特定于组件的json配置
    • editable - boolean that makes the component editable/non-editable - handle however you want
    • editable使组件可编辑/不可editable布尔值-根据需要处理
    • cellProps - internal cell-specific props provided by cellProps Layout componentLayout组件提供的内部特定于单元的道具

  3. Your component can receive any additional props specified in json config under props attribute

    您的组件可以接收 props属性下json config中指定的任何其他props

  4. You need to pass cellProps to the lc-cell component

    您需要将cellProps传递给lc-cell组件

  5. Your component needs to specify getConfig method that is used to build the json config after the layout is locked

    您的组件需要指定getConfig方法，该方法用于在布局锁定后用于构建json配置

    • you can inject/update any properties there, the change will be reflected in the json config

      您可以在那里注入/更新任何属性，更改将反映在json配置中
    • beware that it's one-way relationship, if you add props you need to handle them as well if you want to see the changes in DOM

      请注意，这是单向关系，如果要添加道具，还需要处理道具，如果您想查看DOM中的更改，

定制组件示例 (Example custom component)

Here's an example of TextBlock component that is capable of rendering text from config, editing the text in UI & putting the changes back in config via getConfig method.

这是一个TextBlock组件的示例，该组件能够从config渲染文本，在UI中编辑文本并通过getConfig方法将所做的更改放回到config中。 

<template>
  <lc-cell
    v-bind="cellProps" // required internal props for the cell, better not to touch
    :key="config.id" // just a simple optimization
    :display="config.display" // display props for the cell (taken from config) - feel free to modify
    :draggable="editable && !contentEditable" // specifies if the component is draggable
    @edit:content="editContent" // on edit button clicked
    @delete:content="$emit('delete:content')" // on delete button clicked
  >
    <div class="TextBlock">
      <p
        :contenteditable="contentEditable"
        @keydown.enter="updateText"
        @focusout="updateText"
        :draggable="contentEditable"
        @dragstart.prevent.stop
        @drag.prevent.stop
        ref="text"
      >
        {{ internalText }}
      </p>
    </div>
  </lc-cell>
</template>

<script>
export default {
  name: 'TextBlock',
  props: {
    // vue-layout-composer props
    initialConfig:      Object,   // required, internal props
    editable:           Boolean,  // required, internal props
    cellProps:          Object,   // required, internal props

    // custom props
    text:               String,   // custom props specified in json config
  },
  data() {
    return {
      internalText:     this.text,
      config:           {},
      contentEditable:  false,
    }
  },
  created() {
    this.config = {
      ...this.initialConfig,
    }
  },
  watch: {
    internalText() {
      this.config.props.text = this.internalText
    },
  },
  methods: {
    // object returned by `getConfig` ends up in the final json config after locking the editor
    getConfig() {
      return this.config
    },
    editContent() {
      this.contentEditable = true
      setTimeout(() => this.$refs.text.focus(), 0)
    },
    updateText(event) {
      this.internalText = event.target.textContent.trim()
      this.contentEditable = false
    }
  }
}
</script>

<style scoped>
// ...
</style>

目标 (Goals)

  • [ ] Layout properties view

    []布局属性视图

  • [ ] Resize in editor

    []在编辑器中调整大小

  • [ ] Registered components picker

    []注册组件选择器

  • [ ] Server-side rendering support

    []服务器端渲染支持

长期目标 (Long-term Goals)

  • [ ] Data down, actions up

    []数据减少，操作增加

  • [ ] Power layout - support for GraphQL

    []电源布局-支持GraphQL

翻译自: https://vuejsexamples.com/dynamic-and-json-based-grid-layout-for-vue/

基于vue将json绘制图

cuk5340
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值