vue3项目第三篇

路由导航

由于路由会复用组件实例，造成后续数据无法更新，生命周期钩子函数无法执行

基于逻辑函数拆分业务

具体做法：

列表无限加载功能实现

核心实现逻辑：使用elementPlus提供的v-infinite-scroll指令监听是否满足触底条件，满足加载条件时让页数参数+1获取下一页数据，做新老数据拼接渲染。

切换路由自动滚动到顶部

vue-router支持scrollBehavior配置项，可以指定路由切换时的滚动位置

js 复制代码

scrollBehavior(){
return { top : 0}
}

动态类名显示

在DOM标签上，加上 :class="{ active:i=== activeIndex }",active是高亮显示样式，i是遍历的下标，activeIndex是ref的响应式对象

获取鼠标在盒子的位置

使用VueUse组件-useMouseInElement组件

插入一个小点

默认导入一般导入文件层级，命名导入一般导入上一级文件夹层级

components全局组件注册

对于components文件夹中的组件，一般复用率比较高，考虑创建创建一个入口文件index.vue导入其中的组件

js 复制代码

// 把components中的所组件都进行全局化注册
// 通过插件的方式
//默认导入组件可以自定义名字
import ImageView from './ImageView/index.vue'
import Sku from './XtxSku/index.vue'
export const componentPlugin = {
  install (app) {
    // app.component('组件名字'，组件配置对象)
    app.component('XtxImageView', ImageView)
    app.component('XtxSku', Sku)
  }
}

在main.js中使用

js 复制代码

import { componentPlugin} from '@/components'
app.use(componentPlugin)

表单组件

自定义验证成功调用回调：在 JavaScript 的异步编程模式中，特别是在处理表单验证时，使用回调函数（callback）是一种常见的模式。即使验证成功，也需要调用回调函数，原因如下：

统一接口回调函数提供了一个统一的接口来处理异步操作的结果。无论是验证成功还是失败，都通过调用同一个 callback 函数来报告结果。这种统一性简化了错误处理和结果处理的逻辑。
错误处理在异步操作中，可能会发生错误或异常。即使验证逻辑本身没有发现问题，也可能因为其他原因（如网络请求失败）导致操作失败。通过调用回调函数，你可以在一个地方集中处理所有可能的错误情况。
流程控制在某些情况下，验证操作可能是一系列操作中的一步。例如，在用户提交表单之前，你可能需要进行数据验证、数据清洗、发送数据到服务器等。回调函数允许你在每个步骤完成后执行特定的逻辑，确保整个流程按预期进行

js 复制代码

agree: [
    {
      validator: (rule, val, callback) => {
        return val ? callback() : new Error('请先同意协议')
      }
    }
  ]

登录错误提示信息引入

js 复制代码

import { ElMessage } from 'element-plus'
import 'element-plus/theme-chalk/el-message.css'

选项框难点

在pinia仓库中有一个cartlist数组，创建的函数只是拿到了当前是否选中的一个参数，无法知道多个物品中要修改谁的选中状态。
解决：一个参数不够用，补一个参数，除了是否选中的参数，加一个用来筛选的参数，但是在模版绑定的回调函数里边只能拿到一个参数，所以改写成箭头函数的回调写法，传递参数调用实际的回调函数，

在组件中尽量用import { useRouter } from 'vue-router'， const router = useRouter()

时间戳转换为分秒

js 复制代码

  const formatTime = computed(() => dayjs.unix(time.value).format('mm分ss秒'))

axios请求

axios的并发请求