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的并发请求
相关推荐
望获linux37 分钟前
【Linux基础知识系列:第一百五十九篇】磁盘健康监测:smartctl
linux·前端·数据库·chrome·python·操作系统·软件
十一吖i2 小时前
vue3表格显示隐藏列全屏拖动功能
前端·javascript·vue.js
冰暮流星3 小时前
css之线性渐变
前端·css
徐同保3 小时前
tailwindcss暗色主题切换
开发语言·前端·javascript
mapbar_front3 小时前
大厂精英为何在中小公司水土不服?
前端
生莫甲鲁浪戴4 小时前
Android Studio新手开发第二十七天
前端·javascript·android studio
2501_916008896 小时前
Web 前端开发常用工具推荐与团队实践分享
android·前端·ios·小程序·uni-app·iphone·webview
SkylerHu6 小时前
前端代码规范:husky+ lint-staged+pre-commit
前端·代码规范
菜鸟una7 小时前
【微信小程序 + 消息订阅 + 授权】 微信小程序实现消息订阅流程介绍,代码示例(仅前端)
前端·vue.js·微信小程序·小程序·typescript·taro·1024程序员节
Yeats_Liao7 小时前
Go Web 编程快速入门 05 - 表单处理:urlencoded 与 multipart
前端·golang·iphone