62 lines
1.5 KiB
Vue
62 lines
1.5 KiB
Vue
|
<template>
|
|||
|
|
<div class="grid-layout-container">
|
|||
|
|
<el-card shadow="hover" header="vue-grid-layout 拖拽布局演示">
|
|||
|
|
<el-alert
|
|||
|
|
title="感谢优秀的 `vue-grid-layout`，项目地址：https://github.com/jbaysolutions/vue-grid-layout"
|
|||
|
|
type="success"
|
|||
|
|
:closable="false"
|
|||
|
|
class="mb15"
|
|||
|
|
></el-alert>
|
|||
|
|
<grid-layout
|
|||
|
|
:layout.sync="layouts"
|
|||
|
|
:col-num="12"
|
|||
|
|
:row-height="30"
|
|||
|
|
:is-draggable="true"
|
|||
|
|
:is-resizable="true"
|
|||
|
|
:is-mirrored="false"
|
|||
|
|
:vertical-compact="true"
|
|||
|
|
:margin="[10, 10]"
|
|||
|
|
:use-css-transforms="true"
|
|||
|
|
>
|
|||
|
|
<grid-item v-for="item in layouts" :x="item.x" :y="item.y" :w="item.w" :h="item.h" :i="item.i" :key="item.i">
|
|||
|
|
<div class="w100 h100 flex">
|
|||
|
|
<span class="flex-margin font14">{{ item.i }}</span>
|
|||
|
|
</div>
|
|||
|
|
</grid-item>
|
|||
|
|
</grid-layout>
|
|||
|
|
</el-card>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script lang="ts">
|
|||
|
|
import { toRefs, reactive } from 'vue';
|
|||
|
|
export default {
|
|||
|
|
name: 'funGridLayout',
|
|||
|
|
setup() {
|
|||
|
|
const state = reactive({
|
|||
|
|
layouts: [
|
|||
|
|
{ x: 0, y: 0, w: 2, h: 2, i: '0' },
|
|||
|
|
{ x: 2, y: 0, w: 2, h: 4, i: '1' },
|
|||
|
|
{ x: 4, y: 0, w: 2, h: 5, i: '2' },
|
|||
|
|
{ x: 6, y: 0, w: 2, h: 3, i: '3' },
|
|||
|
|
{ x: 8, y: 0, w: 2, h: 3, i: '4' },
|
|||
|
|
{ x: 10, y: 0, w: 2, h: 3, i: '5' },
|
|||
|
|
{ x: 0, y: 5, w: 2, h: 5, i: '6' },
|
|||
|
|
],
|
|||
|
|
});
|
|||
|
|
return {
|
|||
|
|
...toRefs(state),
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
};
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped lang="scss">
|
|||
|
|
.grid-layout-container {
|
|||
|
|
.vue-grid-item {
|
|||
|
|
background: var(--color-primary);
|
|||
|
|
color: #ffffff;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|