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

选项框难点

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

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

时间戳转换为分秒

js 复制代码
  const formatTime = computed(() => dayjs.unix(time.value).format('mm分ss秒'))

axios请求

  1. axios的并发请求
相关推荐
中微子3 分钟前
🔥 React Context 面试必考!从源码到实战的完整攻略 | 99%的人都不知道的性能陷阱
前端·react.js
中微子1 小时前
React 状态管理 源码深度解析
前端·react.js
加减法原则2 小时前
Vue3 组合式函数:让你的代码复用如丝般顺滑
前端·vue.js
yanlele3 小时前
我用爬虫抓取了 25 年 6 月掘金热门面试文章
前端·javascript·面试
lichenyang4533 小时前
React移动端开发项目优化
前端·react.js·前端框架
你的人类朋友3 小时前
🍃Kubernetes(k8s)核心概念一览
前端·后端·自动化运维
web_Hsir3 小时前
vue3.2 前端动态分页算法
前端·算法
烛阴3 小时前
WebSocket实时通信入门到实践
前端·javascript
草巾冒小子3 小时前
vue3实战:.ts文件中的interface定义与抛出、其他文件的调用方式
前端·javascript·vue.js
DoraBigHead4 小时前
你写前端按钮,他们扛服务器压力:搞懂后端那些“黑话”!
前端·javascript·架构