当前位置：首页 > news >正文

vue基础-vue监听当前屏幕大小做不同的操作

news 2025/8/2 9:14:09

文章目录

前言
一、代码如下：
总结

前言

在vue项目开发过程中，有个需求，就是当屏幕大于1024时，我们默认为PC模式。小于1024时，我们默认为H5模式。但是有的界面我们想在PC和H5上面展示不同的数据，请求不同的接口，而且要动态改变，就是屏幕缩小的时候做出改变。

下面介绍监听当前屏幕的宽度，动态请求数据更改数据。

一、代码如下：

const contentData = ref('')// 使用响应式
const state = reactive({screenWidth: window?.innerWidth,
})
// 用来判断不用多次加载
const isLoading = ref(false)const requestData = async () => {try {// 根据PC判断const isPc = window?.innerWidth >= 1024let tabId = import.meta.env.WEB_IDif (isPc)tabId = import.meta.env.PC_IDconst result = await apis.getxxxxxInfo(tabId)if (result && result.data && result.data.content)contentData.value = result.data.content}catch (error) {console.error(error)}
}onMounted(() => {// 第一次加载数据requestData()// 增加window监听window.addEventListener('resize', () => {state.screenWidth = window?.innerWidth})
})// 监听某个值
watchEffect(() => {if (state.screenWidth >= 1024) {if (isLoading.value)returnisLoading.value = truerequestData()}else {if (!isLoading.value)returnisLoading.value = falserequestData()}
}