7f00053b34
Former-commit-id: 41a358b0515ea0806a9cec5aa0eeafa69dbc5803 [formerly 2e4519ee057ac6c95e949a646e3c399f8b2f44f7] [formerly 41a358b0515ea0806a9cec5aa0eeafa69dbc5803 [formerly 2e4519ee057ac6c95e949a646e3c399f8b2f44f7] [formerly 41a358b0515ea0806a9cec5aa0eeafa69dbc5803 [formerly 2e4519ee057ac6c95e949a646e3c399f8b2f44f7] [formerly 2e4519ee057ac6c95e949a646e3c399f8b2f44f7 [formerly 8ba9ec64281660336d5fb304b9a5a64cbb2aa17c [formerly a2e8abc48eb676a12c407d8f5e3f2f6b5151686a]]]]] Former-commit-id: 05526984ebfd295b5fc6eb9f2204c7785b962ecf Former-commit-id: 770c57651cba3499bc7bcd3c33cf10becb5f289e Former-commit-id: bf411035a0a7488a3f329786911deb401b4c5bff [formerly 2b4ca8aa7eccc9fe3da2abdd55b886fdc189df09] Former-commit-id: 233582f8c356147ddea2f836fcf45fe215f7f79d Former-commit-id: 1b4ed84ffe61099ac9a2d077851f133d33626df9 Former-commit-id: bf66bb6d5444d94cca4b628cbc7ff407b4c50511 Former-commit-id: 8dff1bb9cd43cdc30d42ec5c4373c25c1cae8214 Former-commit-id: 419216ae2da027e8a0282ca71590bdd2e51a1133
119 lines
3.3 KiB
Vue
119 lines
3.3 KiB
Vue
<template>
|
|
<d2-container type="full" class="page">
|
|
<d2-grid-layout
|
|
v-bind="layout"
|
|
@layout-updated="layoutUpdatedHandler">
|
|
<d2-grid-item
|
|
v-for="(item, index) in layout.layout"
|
|
:key="index"
|
|
v-bind="item"
|
|
@resize="resizeHandler"
|
|
@move="moveHandler"
|
|
@resized="resizedHandler"
|
|
@moved="movedHandler">
|
|
<el-card shadow="never" class="page_card">
|
|
<el-tag size="mini" type="info" slot="header">Card {{item.i}}</el-tag>
|
|
<template v-if="item.i === '0'">
|
|
<div class="d2-mb">拖拽卡片调整位置</div>
|
|
<div class="d2-mb">拖拽卡片右下角的手柄调整卡片大小</div>
|
|
<div class="d2-mb">在控制台打印出数据变化</div>
|
|
</template>
|
|
</el-card>
|
|
</d2-grid-item>
|
|
</d2-grid-layout>
|
|
</d2-container>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data () {
|
|
return {
|
|
layout: {
|
|
layout: [
|
|
{ 'x': 0, 'y': 0, 'w': 4, 'h': 10, 'i': '0' },
|
|
{ 'x': 4, 'y': 0, 'w': 2, 'h': 5, 'i': '1' },
|
|
{ 'x': 6, 'y': 0, 'w': 4, 'h': 5, 'i': '2' },
|
|
{ 'x': 10, 'y': 0, 'w': 2, 'h': 10, 'i': '3' },
|
|
{ 'x': 4, 'y': 5, 'w': 4, 'h': 5, 'i': '4' },
|
|
{ 'x': 8, 'y': 5, 'w': 2, 'h': 5, 'i': '5' },
|
|
{ 'x': 0, 'y': 10, 'w': 8, 'h': 5, 'i': '6' },
|
|
{ 'x': 8, 'y': 10, 'w': 4, 'h': 5, 'i': '7' }
|
|
],
|
|
colNum: 12,
|
|
rowHeight: 30,
|
|
isDraggable: true,
|
|
isResizable: true,
|
|
isMirrored: false,
|
|
verticalCompact: true,
|
|
margin: [10, 10],
|
|
useCssTransforms: true
|
|
}
|
|
}
|
|
},
|
|
mounted () {
|
|
// 加载完成后显示提示
|
|
this.showInfo()
|
|
},
|
|
methods: {
|
|
log (arg1 = 'log', ...logs) {
|
|
if (logs.length === 0) {
|
|
console.log(arg1)
|
|
} else {
|
|
console.group(arg1)
|
|
logs.forEach(e => {
|
|
console.log(e)
|
|
})
|
|
console.groupEnd()
|
|
}
|
|
},
|
|
// 显示提示
|
|
showInfo () {
|
|
this.$notify({
|
|
title: '提示',
|
|
message: '你可以按住卡片拖拽改变位置；或者在每个卡片的右下角拖动，调整卡片大小'
|
|
})
|
|
},
|
|
// 测试代码
|
|
layoutUpdatedHandler (newLayout) {
|
|
console.group('layoutUpdatedHandler')
|
|
newLayout.forEach(e => {
|
|
console.log(`{'x': ${e.x}, 'y': ${e.y}, 'w': ${e.w}, 'h': ${e.h}, 'i': '${e.i}'},`)
|
|
})
|
|
console.groupEnd()
|
|
},
|
|
resizeHandler (i, newH, newW) {
|
|
this.log('resizeHandler', `i: ${i}, newH: ${newH}, newW: ${newW}`)
|
|
},
|
|
moveHandler (i, newX, newY) {
|
|
this.log('moveHandler', `i: ${i}, newX: ${newX}, newY: ${newY}`)
|
|
},
|
|
resizedHandler (i, newH, newW, newHPx, newWPx) {
|
|
this.log('resizedHandler', `i: ${i}, newH: ${newH}, newW: ${newW}, newHPx: ${newHPx}, newWPx: ${newWPx}`)
|
|
},
|
|
movedHandler (i, newX, newY) {
|
|
this.log('movedHandler', `i: ${i}, newX: ${newX}, newY: ${newY}`)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.page {
|
|
.vue-grid-layout {
|
|
background-color: $color-bg;
|
|
border-radius: 4px;
|
|
margin: -10px;
|
|
.page_card {
|
|
height: 100%;
|
|
@extend %unable-select;
|
|
}
|
|
.vue-resizable-handle {
|
|
opacity: .3;
|
|
&:hover{
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|