44 lines
999 B
JavaScript
44 lines
999 B
JavaScript
|
// 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,
|
||
|
|
}
|
||
|
|
}
|