【发布时间】：2020-11-21 21:53:39
【问题描述】：
我对 Vue 和 Sails.js 都有些陌生，但有人知道如何在 Sails.js 应用程序中使用 vue-grid-layout 吗？我玩得很开心。
我已经通过 NPM 安装了 vue-grid-layout，这是我所能得到的。我读过一些关于在 Sails 中包含 npm 模块的内容，例如：http://ash.zi.vc/sails/2016/02/02/including-client-side-node-modules-in-my-sails-application/，但我恐怕还是有点迷茫。
我有一个测试应用程序作为独立的 Vue 应用程序运行良好，其中包含一个 dashboard.html 文件，其中包含以下内容：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Dashboard</title>
<meta
name="viewport"
content="initial-scale=1, maximum-scale=1, user-scalable=no"
/>
<link rel="stylesheet" href="css/app.css" />
<link rel="stylesheet" href="css/dashboard.css" />
<link rel="stylesheet" href="css/box-sizing.css" />
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Inconsolata"
/>
</head>
<body>
<h2 class="page-title">Dashboard</h2>
<div id="app" style="width: 100%;">
<!--<pre>{{ $data | json }}</pre>-->
<div>
<div class="layoutJSON">
Displayed as <code>[x, y, w, h]</code>:
<div class="columns">
<div class="layoutItem" v-for="item in layout">
<b>{{item.i}}</b>: [{{item.x}}, {{item.y}}, {{item.w}},
{{item.h}}]
</div>
</div>
</div>
</div>
<div id="content">
<button @click="addItem">Add Box</button>
<input type="checkbox" v-model="draggable" /> Draggable
<input type="checkbox" v-model="resizable" /> Resizable
<input type="checkbox" v-model="responsive" /> Responsive
<br />
<grid-layout
:layout.sync="layout"
:col-num="12"
:row-height="30"
:is-draggable="draggable"
:is-resizable="resizable"
:vertical-compact="true"
:use-css-transforms="true"
:responsive="responsive"
:breakpoints="{ lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }"
:cols="{ lg: 12, md: 12, sm: 12, xs: 4, xxs: 2 }"
>
<grid-item
v-for="item in layout"
:x="item.x"
:y="item.y"
:w="item.w"
:h="item.h"
:i="item.i"
:key="item.i"
>
<div class="card-content">
<div class="card-top-bar w-clearfix">
<div class="card-title"><p>{{item.cardTitle}}</p></div>
<a @click="removeItem(item.i)" href="#"
>
<div class="settingsLink">
<img
src="images/settings-24px.svg"
width="20"
alt=""
/></div
></a>
</div>
<div class="reading-value">{{item.reading}}</div>
<div class="reading-label">{{item.readingLabel}}</div>
</div>
</grid-item>
</grid-layout>
</div>
</div>
<script src="vue.min.js"></script>
<script src="../dist/vue-grid-layout.umd.min.js"></script>
<script src="dashboard.js"></script>
</body>
</html>
还有dashboard.js 代码：
var testLayout = [
{
x: 0,
y: 0,
w: 8,
h: 14,
i: "1",
cardTitle: "Title 1",
reading: "74.6",
readingLabel: "Reading 1",
},
{
x: 0,
y: 14,
w: 4,
h: 5,
i: "2",
cardTitle: "Title 2",
reading: "4.5",
readingLabel: "Reading 2",
},
{
x: 4,
y: 14,
w: 4,
h: 5,
i: "3",
cardTitle: "Title 3",
reading: "39.5",
readingLabel: "Reading 3",
},
{
x: 8,
y: 14,
w: 4,
h: 5,
i: "4",
cardTitle: "Title 4",
reading: "7.7",
readingLabel: "Reading 4",
},
{
x: 8,
y: 0,
w: 4,
h: 9,
i: "5",
cardTitle: "Title 5",
reading: "7.777",
readingLabel: "Reading 5",
},
{
x: 8,
y: 9,
w: 4,
h: 5,
i: "6",
cardTitle: "Title 6",
reading: "79%",
readingLabel: "Reading 6",
},
];
// var GridLayout = VueGridLayout.GridLayout;
// var GridItem = VueGridLayout.GridItem;
new Vue({
el: "#app",
// components: {
// "GridLayout": GridLayout,
// "GridItem": GridItem
// },
data: {
layout: testLayout,
draggable: true,
resizable: true,
responsive: true,
index: 0,
},
mounted: function () {
this.index = this.layout.length;
},
methods: {
addItem: function () {
// Add a new item. It must have a unique key!
this.layout.push({
x: (this.layout.length * 4) % (this.colNum || 12),
y: this.layout.length + (this.colNum || 12), // puts it at the bottom
w: 4,
h: 5,
i: this.index,
cardTitle: "Untitled",
reading: "N/A",
readingLabel: ""
});
// Increment the counter to ensure key is always unique.
this.index++;
},
removeItem: function (val) {
this.layout = this.layout.filter((item) => item.i !== val);
},
}
});
非常感谢任何见解。 查看网格布局instructions here.
【问题讨论】：
标签： javascript vue.js sails.js