gypsy-crm-frontend-vu/components/cwg-match-media.vue

<template>
    <template v-if="shouldShow">
        <slot />
    </template>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, onUnmounted } from 'vue';

const props = defineProps({
    minWidth: {
        type: Number,
        default: undefined
    },
    maxWidth: {
        type: Number,
        default: undefined
    }
})

const shouldShow = ref(true)

function checkWidth() {
    const width = uni.getSystemInfoSync().windowWidth
    shouldShow.value = (props.minWidth === undefined || width >= props.minWidth) && (props.maxWidth === undefined || width <= props.maxWidth)
}

checkWidth()
let resizeListener: any
onMounted(() => {
    resizeListener = () => checkWidth()
    uni.onWindowResize && uni.onWindowResize(resizeListener)
})
onUnmounted(() => {
    uni.offWindowResize && uni.offWindowResize(resizeListener)
})
</script>

<style lang="scss" scoped>
@import "@/uni.scss";
</style>