vue-grid-layout 中文文档
vue-grid-layout 响应式布局
vue-grid-layout 响应式布局，设置responsive和breakpoints可以根据屏幕大小调整布局以达到设配各种屏幕的效果。
响应式布局
<grid-layout :responsive="true" :breakpoints="{ lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }">
</grid-layout>完整代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>vue-grid-layout 响应式布局</title>
<meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui">
<script src="https://www.itxst.com/package/vue/vue.min.js"></script>
<script src="https://www.itxst.com/package/vue-grid-layout/vue-grid-layout.umd.min.js"></script>
</head>
<body style="padding:10px;">
<div id="app">
<div>点“pc模式”、“平板模式”、“手机模式”试试看</div>
<grid-layout :layout.sync="layout" :col-num="12" :row-height="30" :is-draggable="true" :is-resizable="true"
:responsive="true" :margin="[10, 10]" :breakpoints="{ lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }">
<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">
{{item.i}}
</grid-item>
</grid-layout>
</div>
<script>
var app = new Vue({
el: '#app',
components: {
GridLayout: VueGridLayout.GridLayout,
GridItem: VueGridLayout.GridItem
},
data() {
return {
layout: [
{ "x": 0, "y": 0, "w": 2, "h": 2, "i": "0" },
{ "x": 2, "y": 0, "w": 2, "h": 2, "i": "1" },
{ "x": 4, "y": 0, "w": 2, "h": 2, "i": "2" },
{ "x": 0, "y": 1, "w": 6, "h": 2, "i": "3" },
]
};
},
methods: {
}
});
</script>
<style scoped>
.vue-grid-layout {
background: #eee;
}
.vue-grid-item:not(.vue-grid-placeholder) {
background: #ccc;
border: 1px solid black;
}
.vue-grid-item .resizing {
opacity: 0.9;
}
.vue-grid-item .static {
background: #cce;
}
.vue-grid-item .text {
font-size: 24px;
text-align: center;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
height: 100%;
width: 100%;
}
.vue-grid-item .no-drag {
height: 100%;
width: 100%;
}
.vue-grid-item .minMax {
font-size: 12px;
}
.vue-grid-item .add {
cursor: pointer;
}
.vue-draggable-handle {
position: absolute;
width: 20px;
height: 20px;
top: 0;
left: 0;
background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10'><circle cx='5' cy='5' r='5' fill='#999999'/></svg>") no-repeat;
background-position: bottom right;
padding: 0 8px 8px 0;
background-repeat: no-repeat;
background-origin: content-box;
box-sizing: border-box;
cursor: pointer;
}
</style>
</body>
</html>