Batch registration component

General steps ：

1 Use require Provided function context Load all... In a directory .vue Postfix file .
2 then context Function will return an import function importFn
3 It has another attribute keys() Get all file paths
4 Through the file path array , By traversing the array , Reuse importFn Import component objects according to the path
5 You can register globally while traversing

//  In fact, that is vue plug-in unit , Expand vue function , Global components 、 Instructions 、 function  （vue.30 Cancel filter ）
//  When you are in mian.js Import , Use Vue.use() (vue3.0 app) When it's done install function 
// import XtxSkeleton from './xtx-skeleton.vue'
// import XtxCarousel from './xtx-carousel.vue'
// import XtxMore from './xtx-more.vue'
// import XtxBread from './xtx-bread.vue'
// import XtxBreadItem from './xtx-bread-item.vue'

//  Import library All components under the folder 
//  Batch import requires a function  require.context(dir,deep,matching)
//  Parameters ：1.  Catalog  2.  Whether to load subdirectories  3.  Loaded regular matches 
const importFn = require.context('./', false, /\.vue$/)
// console.dir(importFn.keys())  File name array 

export default {
    
  install (app) {
    
    // app.component(XtxSkeleton.name, XtxSkeleton)
    // app.component(XtxCarousel.name, XtxCarousel)
    // app.component(XtxMore.name, XtxMore)
    // app.component(XtxBread.name, XtxBread)
    // app.component(XtxBreadItem.name, XtxBreadItem)

    //  Batch register global components 
    importFn.keys().forEach(key => {
    
      //  Import components 
      const component = importFn(key).default
      //  Certified components 
      app.component(component.name, component)
    })

    //  Defined instruction 
    defineDirective(app)
  }
}

const defineDirective = (app) => {
    
  //  Image lazy loading instruction  v-lazyload
  app.directive('lazyload', {
    
    // vue2.0 inserted function , After element rendering 
    // vue3.0 mounted function , After element rendering 
    mounted (el, binding) {
    
      //  Element can only be obtained after it is inserted dom Elements , Can be used  intersectionobserve Monitor and enter the visual area 
      // el  It's a picture element  binding.value  Picture address 
      const observe = new IntersectionObserver(([{
      isIntersecting }]) => {
    
        if (isIntersecting) {
    
          el.src = binding.value
          //  Cancel observation 
          observe.unobserve(el)
        }
      }, {
    
        threshold: 0.01
      })
      //  To observe 
      observe.observe(el)
    }
  })
}