Skip to content

Commit 8698824

Browse files
gmsagmsa
committed
really fixed jbaysolutions#22 and jbaysolutions#32 now
1 parent 6cc148c commit 8698824

File tree

6 files changed

+126
-12
lines changed

6 files changed

+126
-12
lines changed

‎dist/vue-grid-layout.js

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/vue-grid-layout.min.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/vue-grid-layout.min.js.map

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎examples/03-multiple-grids.html

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Vue Grid Layout Example 3 - Multiple instances</title>
6+
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
7+
<link rel="stylesheet" href="app.css">
8+
</head>
9+
<body>
10+
<div id="app1" style="width: 100%;">
11+
<h3> app1 </h3>
12+
<grid-layout :layout="layout"
13+
:col-num="12"
14+
:row-height="30"
15+
:is-draggable="true"
16+
:is-resizable="true"
17+
:vertical-compact="true"
18+
:use-css-transforms="true"
19+
>
20+
<grid-item v-for="item in layout"
21+
:x="item.x"
22+
:y="item.y"
23+
:w="item.w"
24+
:h="item.h"
25+
:i="item.i"
26+
>
27+
<span class="text">{{item.i}}</span>
28+
</grid-item>
29+
</grid-layout>
30+
</div>
31+
<hr/>
32+
<div id="app2" style="width: 100%;">
33+
<h3> app2 </h3>
34+
<grid-layout :layout="layout"
35+
:col-num="12"
36+
:row-height="30"
37+
:is-draggable="true"
38+
:is-resizable="true"
39+
:vertical-compact="true"
40+
:use-css-transforms="true"
41+
>
42+
<grid-item v-for="item in layout"
43+
:x="item.x"
44+
:y="item.y"
45+
:w="item.w"
46+
:h="item.h"
47+
:i="item.i"
48+
>
49+
<span class="text">{{item.i}}</span>
50+
</grid-item>
51+
</grid-layout>
52+
</div>
53+
54+
<script src="vue.min.js"></script>
55+
<script src="../dist/vue-grid-layout.js"></script>
56+
<script type="text/javascript">
57+
Vue.config.debug = true;
58+
Vue.config.devtools = true;
59+
60+
var GridLayout = VueGridLayout.GridLayout;
61+
var GridItem = VueGridLayout.GridItem;
62+
63+
64+
new Vue({
65+
el: '#app1',
66+
components: {
67+
GridLayout,
68+
GridItem,
69+
},
70+
data: {
71+
layout: [
72+
{"x":0,"y":0,"w":2,"h":2,"i":"0"},
73+
{"x":2,"y":0,"w":2,"h":4,"i":"1"},
74+
],
75+
index: 0
76+
},
77+
});
78+
79+
new Vue({
80+
el: '#app2',
81+
components: {
82+
GridLayout,
83+
GridItem,
84+
},
85+
data: {
86+
layout: [
87+
{"x":0,"y":0,"w":2,"h":2,"i":"0"},
88+
{"x":2,"y":0,"w":2,"h":4,"i":"1"},
89+
{"x":4,"y":0,"w":2,"h":2,"i":"2"},
90+
],
91+
index: 0
92+
},
93+
});
94+
95+
96+
97+
</script>
98+
</body>
99+
</html>

‎src/App.vue

Lines changed: 21 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,14 @@
1111
</div>
1212
</div>
1313
</div>
14+
<div class="layoutJSON">
15+
Displayed as <code>[x, y, w, h]</code>:
16+
<div class="columns">
17+
<div class="layoutItem" v-for="item in layout2">
18+
<b>{{item.i}}</b>: [{{item.x}}, {{item.y}}, {{item.w}}, {{item.h}}]
19+
</div>
20+
</div>
21+
</div>
1422
</div>
1523
<div id="content">
1624
<button @click="decreaseWidth">Decrease Width</button>
@@ -48,8 +56,18 @@
4856
<test-element :text="item.i"></test-element>
4957
<!--<button @click="clicked">CLICK ME!</button>-->
5058
</grid-item>
51-
<!--
52-
<grid-item v-for="item in layout" :key="item.i"
59+
</grid-layout>
60+
<hr/>
61+
<grid-layout
62+
:layout="layout2"
63+
:col-num="12"
64+
:row-height="rowHeight"
65+
:is-draggable="draggable"
66+
:is-resizable="resizable"
67+
:vertical-compact="true"
68+
:use-css-transforms="true"
69+
>
70+
<grid-item v-for="item in layout2" :key="item.i"
5371
:x="item.x"
5472
:y="item.y"
5573
:w="item.w"
@@ -59,14 +77,9 @@
5977
:i="item.i"
6078
:is-draggable="item.draggable"
6179
:is-resizable="item.resizable"
62-
@resize="resize"
63-
@move="move"
64-
@resized="resized"
65-
@moved="moved"
6680
>
6781
<test-element :text="item.i"></test-element>
6882
</grid-item>
69-
-->
7083
</grid-layout>
7184
</div>
7285
</div>
@@ -113,6 +126,7 @@
113126
data () {
114127
return {
115128
layout: JSON.parse(JSON.stringify(testLayout)),
129+
layout2: JSON.parse(JSON.stringify(testLayout)),
116130
draggable: true,
117131
resizable: true,
118132
rowHeight: 30,

‎src/GridLayout.vue

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@
2727
export default {
2828
name: "GridLayout",
2929
provide: {
30-
eventBus: new Vue()
30+
eventBus: null
3131
},
3232
components: {
3333
GridItem,
@@ -104,6 +104,7 @@
104104
self.dragEvent(eventType, i, x, y, h, w);
105105
};
106106
107+
self._provided.eventBus = new Vue();
107108
self.eventBus = self._provided.eventBus;
108109
self.eventBus.$on('resizeEvent', self.resizeEventHandler);
109110
self.eventBus.$on('dragEvent', self.dragEventHandler);

0 commit comments

Comments
 (0)