vue-grid-layout
Version:
A draggable and resizable grid layout, as a Vue component.
1 lines • 1.63 kB
JavaScript
(window.webpackJsonp=window.webpackJsonp||[]).push([[17],{413:function(t,i,a){},466:function(t,i,a){"use strict";a(413)},489:function(t,i,a){"use strict";a.r(i);var s=a(371),c={components:{GridLayout:s.GridLayout,GridItem:s.GridItem},data:function(){return{layout:[{x:0,y:0,w:2,h:2,i:"0",static:!1},{x:2,y:0,w:2,h:4,i:"1",static:!0},{x:4,y:0,w:2,h:5,i:"2",static:!1},{x:6,y:0,w:2,h:3,i:"3",static:!1},{x:8,y:0,w:2,h:3,i:"4",static:!1},{x:10,y:0,w:2,h:3,i:"5",static:!1},{x:0,y:5,w:2,h:5,i:"6",static:!1},{x:2,y:5,w:2,h:5,i:"7",static:!1},{x:4,y:5,w:2,h:5,i:"8",static:!1},{x:6,y:3,w:2,h:4,i:"9",static:!0},{x:8,y:4,w:2,h:4,i:"10",static:!1},{x:10,y:4,w:2,h:4,i:"11",static:!1},{x:0,y:10,w:2,h:5,i:"12",static:!1},{x:2,y:10,w:2,h:5,i:"13",static:!1},{x:4,y:8,w:2,h:4,i:"14",static:!1},{x:6,y:8,w:2,h:4,i:"15",static:!1},{x:8,y:10,w:2,h:5,i:"16",static:!1},{x:10,y:4,w:2,h:2,i:"17",static:!1},{x:0,y:9,w:2,h:3,i:"18",static:!1},{x:2,y:6,w:2,h:2,i:"19",static:!1}],draggable:!0,resizable:!0,index:0}},methods:{itemTitle:function(t){var i=t.i;return t.static&&(i+=" - Static"),i}}},e=(a(466),a(34)),n=Object(e.a)(c,(function(){var t=this,i=t._self._c;return i("div",{staticClass:"container"},[i("grid-layout",{attrs:{layout:t.layout,"col-num":12,"row-height":30,"is-draggable":t.draggable,"is-resizable":t.resizable,"vertical-compact":!0,"use-css-transforms":!0},on:{"update:layout":function(i){t.layout=i}}},t._l(t.layout,(function(a){return i("grid-item",{attrs:{static:a.static,x:a.x,y:a.y,w:a.w,h:a.h,i:a.i}},[i("span",{staticClass:"text"},[t._v(t._s(t.itemTitle(a)))])])})),1)],1)}),[],!1,null,null,null);i.default=n.exports}}]);