vue3项目中遇到的一些问题

smallBin
186 阅读2分钟

如何遮盖底部栏

  • 在配置路由时加上一个额外的meta属性

    {
      path: "/city",
      component: () => import("@/views/city/city.vue"),
      meta: {
        hideTabBar: true
      }
}

    在通过v-if或v- show进行动态控制是否显示

    <tab-bar v-if="!router.meta.hideTabBar"/>

  • 给需要的组件添加一个样式进行遮盖

    .city {
    position: relative;
    z-index: 9;//默认不能设置z-index
    height: 100vh;//视口的高度
    background-color: #fff;
    
    overflow-y: auto;//仅在city盒子内进行滚动
}

v-for遍历对象

v-for = "(valve, key, index) in allCity"

局部滚动

  • 当不想让顶部一些东西参与滚动时，可以给需要滚动的东西添加一个样式
.content {
    height: calc(100vh - 不需要滚动的高度)；
    overflow-y: auto;
}

当某些数据经过转换失去响应式时可以使用计算属性

const currentGroup = computed(() => allCities.value[tabActive.value])

切换路由传递参数

//发出参数
const searchBtnClick = () => {
  router.push({
    path: "/search",
    query: {
      startDate,
      endDate,
      currentCity
    }
  })
}
//接受参数
    <h2>开始时间：{{ $route.query.startDate }}</h2>
    <h2>结束时间：{{ $route.query.endDate }}</h2>
    <h2>当前城市：{{ $route.query.currentCity }}</h2>

对store中数据进行解构时需要变成响应式

const { categories } = storeToRefs(homeStore)

移动端对滚动条的隐藏

.categories {
  display: flex;
  overflow-x: auto;
  height: 80px;
  padding: 0 10px;
  margin-top: 8px;
    
  &::-webkit-scrollbar {
    display: none;
  }

计算属性的使用

//当需要监听一个数据变化而引起另一个数据的变化时可以去使用计算属性
const isShowSearchBar = computed(() => {
  return scrollTop.value >= 360
})

//但当监听一个属性的变化去执行一个js逻辑时就没必要去使用计算属性
const { isReachBottom, scrollTop } = useScroll()
watch(isReachBottom, (newValue) => {
  if (newValue) {
    homeStore.fetchHouselistData().then(() => {
      isReachBottom.value = false
    })
  }
})

做加载动画界面时需使用到拦截器

  • 在自己封装的axios中的类的constructor中添加拦截器

    this.instance.interceptors.request.use(config => {
      mainStore.isLoading = true
      return config
    }, err => {
      return err
    })
    this.instance.interceptors.response.use(res => {
      mainStore.isLoading = false
      return res
    }, err => {
      mainStore.isLoading = false
      return err
    })

在组件上添加event和class

  • 当在组件上添加事件时，它会绑定到组件内的根组件上
  • 而绑定class时会绑定到$attrs上，但默认还是添加到根组件上

注：当有多个根时，会报出警告

动态路由

  • 配置路由时

    {
      path: "/detail/:id",
      component: () => import("@/views/detail/detail.vue")
}

  • 跳转时

    const itemClick = (item) => {
  // 跳转到Detail页面
  router.push("/detail/" + item.houseId)
}

  • 在页面获取id时

    //在template中
{{ $route.params.id }}

//在js中
const route = useRoute()
const id = route.params.id

当从服务器拿到的数据过于复杂时可以对其进行拆解

const detailInfos = ref({})
const mainPart = computed(() => detailInfos.value.mainPart)
getDetailInfos(houseId).then(res => {
  detailInfos.value = res.data
})

在setup中不通过document来拿元素

<div class="baidu" ref="mapRef"></div>

const mapRef = ref()
const map = new BMapGL.Map(mapRef.value)

组件内某个数据刷新时组件才刷新

  • 使用v-memo[]

    <div class="main" v-if="mainPart" v-memo="[mainPart]">

ref绑定函数

  • 当组件挂载/卸载的时候就会去执行这个函数
<detail-infos name="描述" :ref="getSectionRef" :top-infos="mainPart.topModule"/>

当detail-infos组件挂载/卸载时就会去执行getSectionRef这个函数

在部署项目时可能会出现默认访问80端口而服务器未打开80端口

avatar
文章
阅读
粉丝