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

这篇具有很好参考价值的文章主要介绍了vue基础-vue监听当前屏幕大小做不同的操作。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

前言

在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 >= 1024
    let tabId = import.meta.env.WEB_ID
    if (isPc)
      tabId = import.meta.env.PC_ID

    const 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)
      return
    isLoading.value = true
    requestData()
  }
  else {
    if (!isLoading.value)
      return
    isLoading.value = false
    requestData()
  }
}