flat: 暂存

hook/useColumnCount.js

@@ -0,0 +1,44 @@
+// composables/useColumnCount.js
+import {
+    ref,
+    onMounted,
+    onUnmounted,
+    watch
+} from 'vue'
+
+export function useColumnCount(onChange = () => {}) {
+    const columnCount = ref(0)
+
+    const calcColumn = () => {
+        const width = uni.getSystemInfoSync().windowWidth
+        const count = Math.min(5, Math.floor(width / 375) + 1)
+        if (count !== columnCount.value) {
+            columnCount.value = count
+        }
+    }
+
+    onMounted(() => {
+        columnCount.value = 2
+        calcColumn()
+        if (process.client) {
+            window.addEventListener('resize', calcColumn)
+        }
+    })
+
+    onUnmounted(() => {
+        if (process.client) {
+            window.removeEventListener('resize', calcColumn)
+        }
+    })
+
+    // 列数变化时执行回调
+    watch(columnCount, (newVal, oldVal) => {
+        if (newVal !== oldVal) {
+            onChange(newVal)
+        }
+    })
+
+    return {
+        columnCount,
+    }
+}