企业网站登录入口官网,网页设计素材图片黑白,软件培训班学费多少,电子商务市场营销文章目录 前言一、代码如下#xff1a;总结 前言
在vue项目开发过程中#xff0c;有个需求#xff0c;就是当屏幕大于1024时#xff0c;我们默认为PC模式。小于1024时#xff0c;我们默认为H5模式。但是有的界面我们想在PC和H5上面展示不同的数据#xff0c;请求不同的接… 文章目录 前言一、代码如下总结 前言
在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()}
}总结
这就是vue监听当前屏幕大小做不同的操作希望帮助到你。
