wip: coding

src/components/Waterfall/src/Waterfall.vue

@@ -1,7 +1,8 @@
 <script lang="ts" setup>
 import { propTypes } from '@/utils/propTypes'
 import { useDesign } from '@/hooks/web/useDesign'
-import { ref, nextTick, unref } from 'vue'
+import { ref, nextTick, unref, onMounted } from 'vue'
+import { isString } from '@/utils/is'
 
 const { getPrefixCls } = useDesign()
 
@@ -11,6 +12,7 @@ const prop = defineProps({
   data: propTypes.arrayOf(propTypes.any),
   reset: propTypes.bool.def(false),
   width: propTypes.number.def(200),
+  height: propTypes.number.def(0),
   gap: propTypes.number.def(20),
   getContainer: propTypes.func.def(() => document.body),
   props: propTypes.objectOf(propTypes.string).def({
@@ -27,7 +29,7 @@ const heights = ref<number[]>([])
 const cols = ref(0)
 
 const filterWaterfall = async () => {
-  const { props, width, gap, getContainer } = prop
+  const { props, width, gap, getContainer, height } = prop
   const data = prop.data as any[]
   await nextTick()
 
@@ -38,20 +40,37 @@ const filterWaterfall = async () => {
   const length = data.length
   for (let i = 0; i < length; i++) {
     if (i + 1 < unref(cols)) {
-      // 说明在第一列
+      if (height || data[i][props.height as string]) {
-      const height = data[i][props.height as string]
+        // 如果有全局高度，就使用全局高度
-      if (height) {
+        // 如果 data[i][props.height as string] 是字符串，只保留数字字符串
-        heights.value.push(height)
+        const itemHeight = isString(data[i][props.height as string])
+          ? Number(data[i][props.height as string].replace(/[^0-9]/gi, ''))
+          : data[i][props.height as string]
+        heights.value[i] = height || itemHeight
       } else {
-        await nextTick()
+        // 说明在第一列
         const itemEl = container.querySelector(`.${prefixCls}-item__${i}`)
-        const rectObject = itemEl?.clientHeight
+        itemEl?.addEventListener('load', () => {
-        console.log(rectObject)
+          const clientRect = itemEl?.getBoundingClientRect()
+          console.log(clientRect)
+        })
+        // const imgEl = new Image()
+        // imgEl.src = data[i][props.src as string]
+        // imgEl.onload = async () => {
+        //   // const itemEl = container.querySelector(`.${prefixCls}-item__${i}`)
+        //   const clientRect = itemEl?.getBoundingClientRect()
+        //   if (clientRect) {
+        //     heights.value[i] = clientRect?.height
+        //   }
+        // }
       }
     }
   }
 }
-filterWaterfall()
+
+onMounted(() => {
+  filterWaterfall()
+})
 </script>
 
 <template>
@@ -60,8 +79,11 @@ filterWaterfall()
       v-for="(item, $index) in data"
       :class="`${prefixCls}-item__${$index}`"
       :key="`water-${$index}`"
+      :style="{
+        width: `${width}px`
+      }"
     >
-      <img :src="item[props.src as string]" alt="" srcset="" />
+      <img :src="item[props.src as string]" class="w-full block" alt="" srcset="" />
     </div>
   </div>
 </template>

src/utils/index.ts

@@ -1,5 +1,3 @@
-// import type { Plugin } from 'vue'
-
 /**
  *
  * @param component 需要注册的组件