一些实用的技巧

vue2批量注册组件

// index.js中
import Vue from 'vue'
//  使用的是webpack require.context(路径【表示公共的组件的目录】,文件深入循环查找【bool】,正则【最终要使用的组件】 )
// './':路径  true:深层查找
const requireComponent = require.context('./', true, /.vue$/)
console.log(requireComponent.keys(), 333)
requireComponent.keys().forEach((item) => {
  // console.log(requireComponent(item), 77)  //  ['./bread.vue', './pubArt.vue', './qq/q.vue']
  /* 获取的是 每一个组件暴露出来的对象 */
  const defaultObj = requireComponent(item).default
  Vue.component(defaultObj.name, defaultObj)
})

最后main.js中导入

vue3批量注册组件

const requireComponent = require.context('./library', true, /.vue$/)
export default {
  install (Vue) {
    // 批量注册组件
    requireComponent.keys().forEach((item) => {
      // console.log(requireComponent[item], 77)  //  ['./bread.vue', './pubArt.vue', './qq/q.vue']
      /* 获取的是 每一个组件暴露出来的对象 */
      const defaultObj = requireComponent(item).default
      Vue.component(defaultObj.name, defaultObj)
    })
}

vue3自定义指令实现图片懒加载

// 创建观察对象实例
// const observer = new IntersectionObserver(callback[, options])
// callback 被观察dom进入可视区离开可视区都会触发
// - 两个回调参数 entries , observer
// - entries 被观察的元素信息对象的数组 [{元素信息},{}]，信息中isIntersecting判断进入或离开
// - observer 就是观察实例
// options 配置参数
// - 三个配置属性 root rootMargin threshold
// - root 基于的滚动容器，默认是document
// - rootMargin 容器有没有外边距
// - threshold 交叉的比例

// 实例提供两个方法
// observe(dom) 观察哪个dom
// unobserve(dom) 停止观察那个dom

import defaultImg from '@/assets/images/1.png'
const requireComponent = require.context('./', true, /.vue$/)
export default {
  install (Vue) {
    // 注册自定义指令
    /* vue2 */
    //   Vue.directive('lazy', {
    //     inserted ((el, binding)=> {
    //   })

    /* vue3 */
    /* 自定义指令：图片懒加载 */
    Vue.directive('lazy', {
      // 浏览器提供 IntersectionObserver
      mounted (el, binding) {
        const observer = new IntersectionObserver(
          ([{ isIntersecting }]) => {
            // console.log(isIntersecting, 666777) // 布尔值
            if (isIntersecting) {
              // 图片加载失败就显示默认图片
              el.onerror = function () {
                el.src = defaultImg
              }
              el.src = binding.value
              // 不在监听dom===stop()
              observer.unobserve(el)
            }
          },
          {
            threshold: 0.01
          }
        )
        // 监听dom
        // console.log(observer, 666)
        observer.observe(el)
      }
    })
  }
}

vue3数据懒加载方法

/* 数据懒加载 */
import { useIntersectionObserver } from '@vueuse/core'
import { ref } from 'vue'

export const useLazyData = (fn) => {
  const target = ref(null)
  const { stop } = useIntersectionObserver(
    // dom
    target,
    // 监听的回调函数
    ([{ isIntersecting }], observerElement) => {
      // console.log(isIntersecting, 222222)
      if (isIntersecting) {
        stop()
        // 获取数据
        // getNew()
        // if (fn) {
        //   fn()
        // }
        fn && fn() // 与上面16-18三行代码等价
      }
    }
  )
  return target
}