File size: 1,041 Bytes
4d70170 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
import type { ComputedRef, Plugin, Ref } from 'vue'
import { computed, inject, reactive, toRefs } from 'vue'
export interface Responsive {
wide: ComputedRef<boolean>
tall: ComputedRef<boolean>
width: Ref<number>
height: Ref<number>
}
const responsiveKey = Symbol('responsive')
export default {
install(app) {
function buildResponsive() {
const data = reactive({
width: window.innerWidth,
height: window.innerHeight,
})
const wide = computed(() => data.width >= 1050)
const tall = computed(() => data.height >= 350)
return {
...toRefs(data),
wide,
tall,
}
}
const responsive = buildResponsive()
app.config.globalProperties.$responsive = responsive
app.provide(responsiveKey, responsive)
window.addEventListener('resize', () => {
responsive.width.value = window.innerWidth
responsive.height.value = window.innerHeight
})
},
} as Plugin
export const useResponsive = () => inject<Responsive>(responsiveKey)
|