Vue全局组件注册

以sticky组件为例

src
|   
-- components  全局组件目录
    |
    ---- index.js           自动化处理文件
    ---- sticky.vue         组件1
复制代码

sticky.vue

<template>
  <div :style="{height:height+'px',zIndex:zIndex}">
    <div :class="className" :style="{top:stickyTop+'px',zIndex:zIndex,position:position,width:width,height:height+'px'}">
      <slot>
        <div>sticky</div>
      </slot>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Sticky',
  props: {
    stickyTop: {
      type: Number,
      default: 0
    },
    zIndex: {
      type: Number,
      default: 1
    },
    className: {
      type: String
    }
  },
  data() {
    return {
      active: false,
      position: '',
      width: undefined,
      height: undefined,
      isSticky: false
    }
  },
  mounted() {
    this.height = this.$el.getBoundingClientRect().height
    window.addEventListener('scroll', this.handleScroll)
    window.addEventListener('resize', this.handleReize)
  },
  activated() {
    this.handleScroll()
  },
  destroyed() {
    window.removeEventListener('scroll', this.handleScroll)
    window.removeEventListener('resize', this.handleReize)
  },
  methods: {
    sticky() {
      if (this.active) {
        return
      }
      this.position = 'fixed'
      this.active = true
      this.width = this.width + 'px'
      this.isSticky = true
    },
    reset() {
      if (!this.active) {
        return
      }
      this.position = ''
      this.width = 'auto'
      this.active = false
      this.isSticky = false
    },
    handleScroll() {
      this.width = this.$el.getBoundingClientRect().width
      const offsetTop = this.$el.getBoundingClientRect().top
      if (offsetTop < this.stickyTop) {
        this.sticky()
        return
      }
      this.reset()
    },
    handleReize() {
      if (this.isSticky) {
        this.width = this.$el.getBoundingClientRect().width + 'px'
      }
    }
  }
}
</script>

复制代码

index.js

/**
 * 首字母大写
 */
const upperFirst = (string) => {
  if (!string) return;
  return string.charAt(0).toUpperCase() + string.slice(1);
}
/**
 * requireComponent description
 */
const requireComponent = require.context(
  //所要注册的组件的文件夹位置
  '.', true, /\.vue$/
)

const install = Vue => {
  if (install.installed) return;
  install.installed = true;
  requireComponent.keys().forEach(fileName => {
    if (fileName === './index.js') return
    // Get component config
    const componentConfig = requireComponent(fileName)
    // Get PascalCase name of component
    // 组件首字母大写转换
    const componentName = upperFirst(
      fileName.replace(/^\.\//, '').replace(/\.\w+$/, '')
    )
    // Register component globally
    Vue.component(componentName, componentConfig.default || componentConfig)
  })
}
export default install

复制代码

main.js

// register global components.
import components from './components'
Vue.use(components)
复制代码

组件中的使用方式：

<Sticky className="sticky">111111</Sticky>
复制代码

转载于:https://juejin.im/post/5c46c0c7f265da61682babbf