|
@@ -4,7 +4,7 @@
|
|
|
<template v-for="(data, i) in state.columns" :key="i">
|
|
<template v-for="(data, i) in state.columns" :key="i">
|
|
|
<div class="app-waterfall__column" :style="i > 0 ? columnStyles : {}">
|
|
<div class="app-waterfall__column" :style="i > 0 ? columnStyles : {}">
|
|
|
<template v-for="(item, n) in data" :key="n">
|
|
<template v-for="(item, n) in data" :key="n">
|
|
|
- <div class="app-waterfall__column-item">
|
|
|
|
|
|
|
+ <div class="app-waterfall__column-item" :style="n > 0 ? itemStyles : {}">
|
|
|
<slot :item="item">{{ item }}</slot>
|
|
<slot :item="item">{{ item }}</slot>
|
|
|
</div>
|
|
</div>
|
|
|
</template>
|
|
</template>
|
|
@@ -14,7 +14,7 @@
|
|
|
</template>
|
|
</template>
|
|
|
|
|
|
|
|
<script lang="ts" setup>
|
|
<script lang="ts" setup>
|
|
|
-import { reactive, shallowRef, computed, watch, onMounted, onActivated, onDeactivated } from 'vue'
|
|
|
|
|
|
|
+import { reactive, shallowRef, computed, watch, onMounted, onActivated, onDeactivated, CSSProperties } from 'vue'
|
|
|
|
|
|
|
|
const props = defineProps({
|
|
const props = defineProps({
|
|
|
//数据列表
|
|
//数据列表
|
|
@@ -43,10 +43,14 @@ const state = reactive({
|
|
|
isDeactivated: false
|
|
isDeactivated: false
|
|
|
})
|
|
})
|
|
|
|
|
|
|
|
-const columnStyles = computed(() => ({
|
|
|
|
|
|
|
+const columnStyles = computed<CSSProperties>(() => ({
|
|
|
marginLeft: `${props.gap}px`
|
|
marginLeft: `${props.gap}px`
|
|
|
}))
|
|
}))
|
|
|
|
|
|
|
|
|
|
+const itemStyles = computed<CSSProperties>(() => ({
|
|
|
|
|
+ marginTop: `${props.gap}px`
|
|
|
|
|
+}))
|
|
|
|
|
+
|
|
|
const render = async () => {
|
|
const render = async () => {
|
|
|
// 增量按需更新
|
|
// 增量按需更新
|
|
|
if (props.dataList.length > state.renderedItemCount) {
|
|
if (props.dataList.length > state.renderedItemCount) {
|