添加Carousel组件

bs4/components/carousel/index.js

@@ -0,0 +1,17 @@
+/*
+ * @Description: In User Settings Edit
+ * @Author: your name
+ * @Date: 2019-09-24 16:13:34
+ * @LastEditTime: 2019-10-24 15:17:57
+ * @LastEditors: Please set LastEditors
+ */
+import Carousel from './src/main'
+import CarouselSlide from './src/slide'
+
+/* istanbul ignore next */
+Carousel.install = function (Vue) {
+  Vue.component(Carousel.name, Carousel)
+  Vue.component(CarouselSlide.name, CarouselSlide)
+}
+
+export default Carousel

bs4/components/carousel/src/main.vue

@@ -0,0 +1,95 @@
+<!--
+ * @Description: In User Settings Edit
+ * @Author: your name
+ * @Date: 2019-09-24 16:13:50
+ * @LastEditTime: 2019-10-25 15:19:54
+ * @LastEditors: Please set LastEditors
+ -->
+
+ <template>
+  <div class="swiper-container" ref="swiperBox">
+    <div class="swiper-wrapper">
+      <slot></slot>
+    </div>
+
+    <div class="swiper-pagination" v-if="initParams.pagination"></div>
+
+    <template v-if="initParams.navigation">
+      <div class="swiper-button-prev"></div>
+      <div class="swiper-button-next"></div>
+    </template>
+
+    <div class="swiper-scrollbar" v-if="initParams.scrollbar"></div>
+  </div>
+ </template>
+
+<script>
+  export default {
+    name: 'b-carousel',
+    provide () {
+      return {
+        initParams: this.initParams
+      }
+    },
+    data () {
+      return {
+        mySwiper: null,
+        optional: { // 可选项，由使用者启用
+          pagination: {
+            el: '.swiper-pagination'
+          },
+          navigation: {
+            nextEl: '.swiper-button-next',
+            prevEl: '.swiper-button-prev',
+          },
+          scrollbar: {
+            el: '.swiper-scrollbar'
+          },
+        },
+        default: { // 默认
+          init: false
+        }
+      }
+    },
+    props: {
+      options: {
+        type: Object,
+        default () {
+          return {}
+        }
+      }
+    },
+    computed: {
+      initParams () {
+        let opt = Object.assign({}, this.options)
+        delete opt.init
+
+        // 合并可选项
+        Object.keys(this.optional).forEach((k) => {
+          if (opt[k] && this.optional[k]) {
+            opt[k] = Object.assign(this.optional[k], opt[k])
+          }
+        })
+
+        // 合并默认参数
+        opt = Object.assign(this.default, opt)
+        return opt
+      }
+    },
+    methods: {
+      emitInit () {
+        this.$emit('init', this.mySwiper)
+      },
+      init () {
+        this.$nextTick(() => {
+          this.mySwiper = new window.Swiper(this.$refs.swiperBox, this.initParams)
+          this.mySwiper.on('init', this.emitInit);
+          this.mySwiper.init()
+        })
+      }
+    },
+    mounted () {
+      this.init()
+    }
+  }
+</script>

bs4/components/carousel/src/slide.vue

@@ -0,0 +1,49 @@
+<!--
+ * @Author: your name
+ * @Date: 2019-10-24 15:04:27
+ * @LastEditTime: 2019-10-25 15:59:03
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ -->
+<template>
+  <div class="swiper-slide"
+    :class="[{'swiper-lazy': lazy.slideBackground}]"
+    :data-background="lazy.slideBackground ? lazy.slideBackground : false"
+  >
+    <template v-if="initParams.lazy">
+
+      <div
+        v-if="lazy.background"
+        :data-background="lazy.background ? lazy.background : false"
+        class="swiper-lazy"
+      >
+        <div class="swiper-lazy-preloader"></div>
+      </div>
+
+      <template v-if="!(lazy.slideBackground || lazy.background)">
+        <img
+          :data-src="lazy.src ? lazy.src : false"
+          :data-srcset="lazy.srcset ? lazy.srcset : false"
+          class="swiper-lazy"
+        >
+        <div class="swiper-lazy-preloader"></div>
+      </template>
+    </template>
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'b-carousel-slide',
+    inject: ['initParams'],
+    props: {
+      lazy: {
+        type: Object,
+        default () {
+          return {}
+        }
+      }
+    }
+  }
+</script>

bs4/index.js

@@ -2,7 +2,7 @@
  * @Description: In User Settings Edit
  * @Author: your name
  * @Date: 2019-09-24 16:02:05
- * @LastEditTime: 2019-10-23 11:56:54
+ * @LastEditTime: 2019-10-24 15:20:47
  * @LastEditors: Please set LastEditors
  */
 
@@ -12,14 +12,16 @@ import Breadcrumb from './components/breadcrumb/index'
 import Button from './components/button/index'
 import ButtonGroup from './components/button-group/index'
 import Card from './components/card/index'
+import Carousel from './components/carousel/index'
 
 const components = [
   Alert,
   Badge,
   Breadcrumb,
   Button,
   ButtonGroup,
-  Card
+  Card,
+  Carousel
 ]
 
 const install = function (Vue) {
@@ -29,7 +31,7 @@ const install = function (Vue) {
   // locale.i18n(opts.i18n)
 
   components.forEach(component => {
-    Vue.component(component.name, component)
+    Vue.use(component)
   })
 
   // Vue.use(InfiniteScroll)
@@ -56,5 +58,6 @@ export default {
   Breadcrumb,
   Button,
   ButtonGroup,
-  Card
+  Card,
+  Carousel
 }