You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
54 lines
995 B
54 lines
995 B
7 days ago
|
<template>
|
||
|
|
<view
|
||
|
|
class="cl-waterfall-column"
|
||
|
|
:style="{
|
||
|
|
margin,
|
||
|
|
width,
|
||
|
|
}"
|
||
|
|
>
|
||
|
|
<slot></slot>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script lang="ts">
|
||
|
|
import { getCurrentInstance, computed, defineComponent, nextTick } from "vue";
|
||
|
|
import { getParent } from "/@/cool/utils";
|
||
|
|
|
||
|
|
export default defineComponent({
|
||
|
|
name: "cl-waterfall-column",
|
||
|
|
|
||
|
|
setup() {
|
||
|
|
const { proxy }: any = getCurrentInstance();
|
||
|
|
|
||
|
|
// cl-waterfall
|
||
|
|
const parent = getParent("cl-waterfall", ["column", "gutter"], ["getRect"]);
|
||
|
|
|
||
|
|
// 宽度
|
||
|
|
const width = computed(
|
||
|
|
() => `calc(${100 / parent.value.column}% - ${parent.value.gutter}rpx)`,
|
||
|
|
);
|
||
|
|
|
||
|
|
// 间距
|
||
|
|
const margin = computed(() => `0 ${parent.value.gutter / 2}rpx`);
|
||
|
|
|
||
|
|
function getRect() {
|
||
|
|
return new Promise((resolve) => {
|
||
|
|
nextTick(() => {
|
||
|
|
uni.createSelectorQuery()
|
||
|
|
.in(proxy)
|
||
|
|
.select(`.cl-waterfall-column`)
|
||
|
|
.boundingClientRect(resolve)
|
||
|
|
.exec();
|
||
|
|
});
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
return {
|
||
|
|
width,
|
||
|
|
margin,
|
||
|
|
getRect,
|
||
|
|
};
|
||
|
|
},
|
||
|
|
});
|
||
|
|
</script>
|