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()
  }
}

总结

这就是vue监听当前屏幕大小做不同的操作,希望帮助到你。

你可能感兴趣的:(vue,vue.js,前端,javascript)