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

<template>
    <!-- #ifdef H5 -->
    <view>
        <match-media v-bind="mediaAttrs">
            <slot />
        </match-media>
    </view>
    <!-- #endif -->
    <!-- #ifdef APP-PLUS -->
    <view v-if="shouldShow">
        <slot />
    </view>
    <!-- #endif -->
</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)

const mediaAttrs = computed(() => {
    const attrs: Record<string, number> = {};
    if (props.minWidth !== undefined) attrs['min-width'] = props.minWidth;
    if (props.maxWidth !== undefined) attrs['max-width'] = props.maxWidth;
    return attrs;
	
})

function checkWidth() {
    const width = uni.getSystemInfoSync().windowWidth
    shouldShow.value = (props.minWidth === undefined || width >= props.minWidth) && (props.maxWidth === undefined || width <= props.maxWidth)
}
// #ifdef APP-PLUS
checkWidth()
let resizeListener: any
onMounted(() => {
    resizeListener = () => checkWidth()
    uni.onWindowResize && uni.onWindowResize(resizeListener)
})
onUnmounted(() => {
    uni.offWindowResize && uni.offWindowResize(resizeListener)
})
// #endif
</script>

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