vue使用网格组件_用vue和typescrip制作的响应式仪表板（网格）

vue使用网格组件

Vue响应破折号 (vue-responsive-dash)

A Responsive Dashboard (grid) made with vue and typescript. Heavily inspired by React-Grid-Layout & Vue-Grid-Layout

使用vue和打字稿制作的响应式仪表板(网格)。 受React-Grid-Layout和Vue-Grid-Layout的极大启发

View Documents 查看文件 View Github 查看Github

Installation️安装 (⚙️ Installation)

$ npm install vue-responsive-dash

🚀如何在Vue中使用 (🚀 How to use in Vue)

<template>
  <div id="app">
    <dashboard :id="'dashExample'">
      <layout v-for="layout in dlayouts" v-bind="layout" :debug="true" :key="layout.breakpoint">
        <dash-item v-for="item in layout.items" v-bind.sync="item" :key="item.id">
          <div class="content"></div>
        </dash-item>
      </layout>
    </dashboard>
  </div>
</template>

<script>
import { Dashboard, Layout, DashItem } from "vue-responsive-dash";

export default {
  name: "App",
  components: {
    Dashboard,
    Layout,
    DashItem
  },
  data() {
    return {
      dlayouts: [
        {
          breakpoint: "xl",
          numberOfCols: 12,
          items: [
            { id: "1", x: 0, y: 0, width: 1, height: 1 },
            { id: "2", x: 1, y: 0, width: 2, height: 1 },
          ]
        },
        {
          breakpoint: "lg",
          breakpointWidth: 1200,
          numberOfCols: 10,
          items: [
            { id: "1", x: 0, y: 0, width: 1, height: 1 },
            { id: "2", x: 1, y: 0, width: 2, height: 1 },
          ]
        },
        {
          breakpoint: "md",
          breakpointWidth: 996,
          numberOfCols: 8,
          items: [
            { id: "1", x: 0, y: 0, width: 1, height: 1 },
            { id: "2", x: 1, y: 0, width: 2, height: 1 },
          ]
        },
        {
          breakpoint: "sm",
          breakpointWidth: 768,
          numberOfCols: 4,
          items: [
            { id: "1", x: 0, y: 0, width: 1, height: 1 },
            { id: "2", x: 1, y: 0, width: 2, height: 1 },
          ]
        },
        {
          breakpoint: "xs",
          breakpointWidth: 480,
          numberOfCols: 2,
          items: [
            { id: "1", x: 0, y: 0, width: 1, height: 1 },
            { id: "2", x: 1, y: 0, width: 1, height: 1 },
          ]
        },
        {
          breakpoint: "xxs",
          breakpointWidth: 0,
          numberOfCols: 1,
          items: [
            {
              id: "1",
              x: 0,
              y: 0,
              width: 1,
              height: 1
            },
            { id: "2", x: 0, y: 1, width: 1, height: 1 }
          ]
        }
      ]
    };
  }
};
</script>

<style>
.content {
  height: 100%;
  width: 100%;
  border: 2px solid #42b983;
  border-radius: 5px;
}
</style>

⭐️表示支持 (⭐️ Show Your Support)

Please give a ⭐️ if this project helped you!

如果这个项目对您有帮助，请给他一个️！

ting贡献 (👏 Contributing)

If you have any questions or requests or want to contribute to vue-responsive-dash or other packages, please write the issue or give me a Pull Request freely.

如果您有任何疑问或要求，或者想对vue-responsive-dash或其他软件包有所帮助，请写下问题或免费给我“拉取请求”。

🐞错误报告 (🐞 Bug Report)

If you find a bug, please report to us opening a new Issue on GitHub.

如果发现错误，请报告给我们，在GitHub上打开一个新的Issue 。

Development️发展 (⚙️ Development)

npm run serve (npm run serve)

翻译自: https://vuejsexamples.com/a-responsive-dashboard-grid-made-with-vue-and-typescrip/

vue使用网格组件