由Vue支持的仪表板配置工具

短剑 (dirk)

A simple dashboard layout library powered by Vue, written at SamKnows.

由Vue提供支持的简单仪表板布局库，由SamKnows编写。

View demo 查看演示 Download Source 下载源

安装 (Installation)

$ npm install --save dirk

用法 (Usage)

To use Dirk, you need to import the Dashboard component, and then pass in a configuration object containing information on what to display in the dashboard and how to display it.

要使用Dirk，您需要导入Dashboard组件，然后传入一个配置对象，其中包含有关在仪表板上显示什么以及如何显示的信息。

Have a play with [the demo][demo dashboard].

与[演示] [演示仪表板]一起玩。

Each coloured block is a panel. Every panel is powered by a Vue component. For example:

每个彩色块都是一个面板 。 每个面板均由Vue组件供电。 例如：

<template>
  <dashboard :data="data" :component-getter="getComponent" :editing="true"></dashboard>
</template>

<script>
  import Dashboard from 'dirk';
  import MyTestPanel from './MyTestPanel.vue';
  
  export default {
    data: () => ({
      data: {
        type: 'horizontal',
        size: 1,
        children: [
          {
            type: 'panel',
            size: 1,
            component: 'MyTestPanel'
          }
        ]
      }
    }),
    methods: {
      getComponent(name) {
        if (name === 'MyTestPanel') {
          return MyTestPanel;
        }

        return { render: h => h('p', '404 component not found') };
      }
    },
    components: {
      Dashboard,
    }
  };
</script>

The would display the MyTestPanel component as the entire dashboard. There's two parts to this, the data object, and the getComponent method. The data object contains blocks, which can be a panel (a component), or "vertical" or "horizontal", which is a layout block which can contain multiple blocks laid out—you guessed it—either vertically or horizontally. The getComponent method takes the string stored in the configuration and returns an actual Vue component: the reason you can't specify a Vue component directly in the configuration is that it makes the object a lot trickier to store in a database.

会将MyTestPanel组件显示为整个仪表板。 这有两部分，数据对象和getComponent方法。 数据对象包含块 ，这些块可以是面板(组件)，也可以是“垂直”或“水平”，这是一个布局块，可以包含多个(您猜对了)垂直或水平布置的块。 getComponent方法采用存储在配置中的字符串并返回实际的Vue组件：您无法直接在配置中指定Vue组件的原因是，它使对象很难存储在数据库中。

In the previous example, we simple have a horizontal block containing a panel block. We can't have a panel block as the root block or the library won't know what to do when we add a new block. The size attribute says how much of the space a block should take up. For example, the following configuration would display two panels - the first taking 40% of the width, and the second taking 60% of the width.

在前面的示例中，我们简单地有一个包含面板块的水平块。 我们不能将面板块作为根块，否则添加新块时库将不知道要做什么。 size属性表示一个块应该占用多少空间。 例如，以下配置将显示两个面板-第一个面板占用宽度的40％，第二个面板占用宽度的60％。

const data = {
  type: 'horizontal',
  size: 1,
  children: [
    {
      type: 'panel',
      size: 0.4,
      component: 'MyTestPanel'
    },
    {
      type: 'panel',
      size: 0.6,
      component: 'MyOtherTestPanel'
    }
  ]
};

It's also possible to pass in configuration, using the meta attribute:

也可以使用meta属性来传递configuration ：

const data = {
  type: 'horizontal',
  size: 1,
  children: [
    {
      type: 'panel',
      size: 0.4,
      component: 'MyTestPanel',
      meta: {
        color: 'red'
      }
    },
    {
      type: 'panel',
      size: 0.6,
      component: 'MyOtherTestPanel',
      meta: {
        color: 'blue'
      }
    }
  ]
};

The contents of the meta object will be passed into the component as props—effectively, <MyTestPanel color="red" />. Basically this exact behaviour can be seen in [the demo dashboard][demo dashboard].

元对象的内容将作为道具传递到组件中，即<MyTestPanel color="red" /> 。 基本上，这种确切的行为可以在[演示仪表板] [演示仪表板]中看到。

In addition to passing in panel blocks to the horizontal and vertical blocks, you can put other horizontal or vertical blocks inside each other to created nested blocks. The following displays one block on the left of the screen with two horizontally stacked blocks to the right of that block: the default settings for the demo dashboard.

除了将面板块传递到水平块和垂直块之外，还可以将其他水平块或垂直块彼此放置在一起以创建嵌套块 。 以下内容在屏幕左侧显示一个块，在该块的右侧显示两个水平堆叠的块：演示仪表板的默认设置。

const defaultData = {
  type: 'horizontal',
  size: 1,
  children: [
    {
      type: 'panel',
      size: 0.4,
      component: 'MyTestPanel'
    },
    {
      type: 'vertical',
      size: 0.6,
      children: [
        {
          type: 'panel',
          size: 0.5,
          component: 'MyTestPanel'
        },
        {
          type: 'panel',
          size: 0.5,
          component: 'MyTestPanel'
        }
      ]
    }
  ]
};

编辑仪表板 (Editing the dashboard)

So far we've just covered how you can display dashboards to the user, but the dashboards are user editable as well. It uses the HTML5 drag and drop API, so it's supported in nearly all desktop browsers including IE11.

到目前为止，我们已经介绍了如何向用户显示仪表板，但是仪表板也可以由用户编辑。 它使用HTML5拖放API，因此几乎所有桌面浏览器(包括IE11)都支持它。

The Dashboard component has an editing property: just set it to true and the dashboard will be user editable:

Dashboard组件具有editing属性：只需将其设置为true，仪表板将是用户可编辑的：

<dashboard :data="data" :component-getter="getComponent" :editing="true"></dashboard>

Now, the user is able to drag panels into different places, add new panels and delete existing panels.

现在，用户可以将面板拖到不同的位置，添加新面板并删除现有面板。

When something is being dragged, the dataTransfer property of the event is set to a JSON stringified version of a component object with component and meta properties.

拖动某些内容时，事件的dataTransfer属性设置为具有component和meta属性的组件对象的JSON字符串化版本。

You can create an element which will create a new panel when dragged onto the dashboard like this:

您可以创建一个元素，当将其拖动到仪表板上时将创建一个新面板 ，如下所示：

<template>
  <div @dragstart="handleDragstart" draggable="true">
    Drag me!
  </div>
</template>

<script>
  export default {
    methods: {
      handleDragstart(e) {
        const data = {
          component: 'MyTestPanel',
          meta: {
            color: 'red'
          }
        };
        e.dataTransfer.setData('text', JSON.stringify(data));
      }
    }
  };
</script>

Then when it is dragged onto the dashboard the MyTestPanel component will be added. It can either be dragged onto the side of a panel to create a new panel next to it, or onto an existing panel to replace that panel.

然后，当将其拖到仪表板上时，将添加MyTestPanel组件。 可以将其拖动到面板的侧面以在其旁边创建一个新面板，也可以将其拖动到现有的面板上以替换该面板。

保存仪表板布局 (Saving dashboard layout)

The dashboard modifies the original object passed to it (I know, I know), so you can just store it in a database or in localStorage or something and pass it straight back in to the dashboard next time the users accesses it.

仪表板会修改传递给它的原始对象(我知道，我知道)，因此您可以将其存储在数据库或localStorage或其他内容中，然后在用户下次访问它时直接将其传递回仪表板。

Let's add an Edit/Save button to our first example that saves to and loads from localStorage:

让我们在第一个示例中添加一个Edit / Save按钮，该按钮可以保存到localStorage并从中加载：

<template>
  <dashboard :data="dashboardData" :component-getter="getComponent" :editing="editing"></dashboard>
  <button @click.prevent="handleButtonClick">{{ editing ? 'Save' : 'Edit' }}</button>
</template>

<script>
  import Dashboard from 'dirk';
  import MyTestPanel from './MyTestPanel.vue';
  
  const storedData = localStorage.getItem('dirk-data');
  
  const defaultData = {
    type: 'horizontal',
    size: 1,
    children: [
      {
        type: 'panel',
        size: 1,
        component: 'MyTestPanel'
      }
    ]
  };
  
  export default {
    data: () => ({
      dashboardData: storedData ? JSON.stringify(storedData) : defaultData,
      editing: false
    }),
    methods: {
      getComponent(name) {
        if (name === 'MyTestPanel') {
          return MyTestPanel;
        }

        return { render: h => h('p', '404 component not found') };
      },
      handleButtonClick() {
        if (this.editing) {
          localStorage.setItem('dirk-data', JSON.stringify(this.dashboardData));
        }
        
        this.editing = !this.editing;
      }
    },
    components: {
      Dashboard,
    }
  };
</script>

Now the first time the dashboard is loaded, it will load from the default data, and when the user makes a change to the dashboard and saves it, the new dashboard will be stored in localStorage and loaded instead of the default data the new time the user accesses the page.

现在，第一次加载仪表板时，它将从默认数据中加载，并且当用户对仪表板进行更改并保存时，新的仪表板将存储在localStorage中并在新的时间加载而不是默认数据。用户访问页面。

大事记 (Events)

The dashboard component also emits two events: changed and changing.

仪表板组件还发出两个事件： changed和changing 。

• The changed event is triggered when anything about the dashboard changes: when the users adds, removes, or changes a panel, or when the user changes the size of a panel.

  当有关仪表板的任何事情发生更改时(当用户添加，移除或更改面板时，或者当用户更改面板大小时)，都会触发changed事件。

• The changing event event is emitted when the user is currently dragging the side of a panel to resize it. This event is useful for handling the aspect ratio of a component - but be careful not to do anything too heavy here or the resize will feel jerky.

  当用户当前拖动面板的侧面以调整其大小时，将发出changing事件事件。 此事件对于处理组件的长宽比很有用-但请注意不要在此处做任何太重的操作，否则调整大小会感到生涩。

浏览器支持 (Browser support)

Dirk is tested in all modern desktop browsers, all the way down to IE11. We're using it on our production website and shipping it to clients who use IE, so it should be pretty stable.

Dirk一直到IE11都在所有现代桌面浏览器中经过测试。 我们正在生产网站上使用它，并将其运送给使用IE的客户，因此它应该非常稳定。

Mobile support isn't as good: while everything displays, no android browsers and only the latest iOS browser have support for the drag and drop API at the time of writing, so you can't really enable editing on mobile.

移动支持并不那么好：在显示所有内容时，在编写本文时，没有Android浏览器，只有最新的iOS浏览器支持拖放API，因此您实际上无法在移动设备上启用编辑功能。

翻译自: https://vuejsexamples.com/a-dashboard-configuration-tool-powered-by-vue/