Vue进阶

1. 自定义插件⭐️

/**
* 使用vue自定义插件注册全局组件
* 语法：
* install方法参数发生了变化
* 1. vue2: {install(Vue){}} => Vue构造函数
* 2. vue3: {install(app){}} => app根实例
*/
import Skeleton from '@/components/Skeleton'
import Checkbox from '@/components/CheckBox'
​
export default {
 install (app) {
   const cps = [Skeleton, Checkbox]
   // console.log('自定义插件：', cps)
   // 批量注册组件
   cps.forEach(cp => {
     app.component(cp.name, cp)
  })
}
}




// 导入自定义插件 全局组件
import ComponentPlugin from '@/components'
// 注册，链式
createApp(App).use(store).use(router).use(ComponentPlugin).mount('#app')

2. 自定义指令⭐️

/**
* 使用vue插件注册全局指令
* 注册全局指令：
* 1. vue2语法：Vue.directive('指令名(不带v-)',{inserted(){}})
* 2. vue3语法：app.directive('指令名(不带v-)',{mounted(){}})
*/
// 导入监控元素或组件是否在视口
import { useIntersectionObserver } from '@vueuse/core'
// 使用图片
import load from '@/assets/images/load.gif'
export default {
 install (app) {
   /**
    * 使用指令实现图片懒加载=> <img v-imglazy='src'/>
    * 思路：
    * 1. 通过指令获取img的dom对象
    * 2. 当img进入视口，就吧服务器的src复制给dom.src
    */
   app.directive('imglazy', {
     mounted (imgdom, binding) {
       // imgdom:img dom对象
       // binding.value 图片url地址
       const { stop } = useIntersectionObserver(
         imgdom, // 被监控的元素
         // 注意：被监控的元素target，进入和离开，都会触发下面这个回调函数
        ([{ isIntersecting }]) => {
           // 没加载出来的时候默认图片
           imgdom.src = load
           if (isIntersecting) {
             setTimeout(() => {
               // 进入视口后，使用图片的dom对象给图片的src赋值
               imgdom.src = binding.value
            }, 0)
             // 如果图片加载失败
             imgdom.onerror = () => {
               imgdom.src = load
            }
             // 关闭监控, 否则会反复执行请求
             stop()
          }
        },
         // 进入当前元素可视区域的比例是多少才执行回调 0-1 值越大 代表需要进入的面积越大
        { threshold: 0 }
      )
    }
  })
}
}

3. v-model（自定义用法）⭐️

​​​​​​​

<template>
<tr v-for="good in validList" :key="good.skuId">
 <!--
小坑：v-model会直接修改good.selected的数据，但是good.selected是vuex中的，必须通过mutations才能修改
解决：自定义v-model来定义函数，从而使用mutations来修改vuex中的值
v-model（语法糖）= :modelValue='xxx' + @update:modelValue='自定义函数()
解析：
:modelValue='xxx'里面的xxx如果变化，就会触发@update:modelValue='自定义函数()
@update:modelValue='自定义函数()括号里面默认有一个$event，拿到的是:modelValue='xxx'xxx的值
-->
 <td>
   <XtxCheckBox :modelValue="good.selected" @update:modelValue="singleCheck(good, $event)" />
 </td>
 </tr>
</template>

4. 跳转新页面重置滚动条位置(scrollBehavior)⭐️

// @/router/index.js
const router = createRouter({
 history: createWebHashHistory(),
 routes,
 // 每次路由跳转新页面，重置滚动条位置
 // vue2 写法：scrollBehavior(){y:0}
 // vue3写法：
 scrollBehavior () {
   return { left: 0, top: 0 }
}
})