骨架组件封装和插件式注册组件---------批量注册组件

骨架组件封装

<template>
  <div class="xtx-skeleton shan" :style="{ width: '60px', height: '30px' }">
    <!-- 1 盒子-->
    <div class="block" :style="{ backgroundColor: '#efefef' }"></div>
    <!-- 2 闪效果 xtx-skeleton 伪元素 --->
  </div>
</template>
<script>
export default {
  name: 'XtxSkeleton'
}
</script>
<style scoped lang="less">
.xtx-skeleton {
  display: inline-block;
  position: relative;
  overflow: hidden;
  vertical-align: middle;
  .block {
    width: 100%;
    height: 100%;
    border-radius: 2px;
  }
}
.shan {
  &::after {
    content: "";
    position: absolute;
    animation: shan 1.5s ease 0s infinite;
    top: 0;
    width: 50%;
    height: 100%;
    background: linear-gradient(
      to left,
      rgba(255, 255, 255, 0) 0,
      rgba(255, 255, 255, 0.3) 50%,
      rgba(255, 255, 255, 0) 100%
    );
    transform: skewX(-45deg);
  }
}
@keyframes shan {
  0% {
    left: -100%;
  }
  100% {
    left: 120%;
  }
}
</style>
​

插件注册

(插件形式注册全局公共组件)

index.js

/**
 * 插件形式：注册全局公共组件
 * vue插件写法：{install(参数){}}  2.0中参数为Vue 3.0中参数为app根实例
 * 插件生效：Vue.use(plugins)=>需要到入口main.js注册
 */
import PageTools from './PageTools'
import UploadExcel from './UploadExcel'
import UploadImg from './UploadImg'
import ScreenFull from './ScreenFull'
import Lang from './Lang'
​
// 定义数据：里边放入全局公共组件
const components = [Lang, PageTools, UploadExcel, UploadImg, ScreenFull]
​
export default {
  /**
   *
   * @param {*} Vue
   */
  install (Vue) {
    // 注册全局组件
    // Vue.component('PageTools', PageTools)
    // Vue.component('UploadExcel', UploadExcel)
    components.forEach(cp => {
      // cp.name 作为批量注册组件的标签名
      Vue.component(cp.name, cp)
    })
  }
}
​