Feat/web swiper indicator style

packages/webpack-plugin/lib/runtime/components/web/mpx-swiper.vue

@@ -6,6 +6,26 @@
   import throttle from 'lodash/throttle'
   import { processSize } from '../../utils'
 
+  function getSwiperIndicatorStyle (alignment, offset, margin, vertical) {
+    const [x, y] = alignment === 'auto' ? (vertical ? [1, 0] : [0, 1]) : alignment
+    const [offsetX, offsetY] = offset
+    const xRatio = (x + 1) / 2
+    const yRatio = (y + 1) / 2
+
+    return {
+      left: `${xRatio * 100}%`,
+      top: `${yRatio * 100}%`,
+      transform: `translate(${-xRatio * 100}%, ${-yRatio * 100}%) translate(${offsetX - x * margin}px, ${offsetY - y * margin}px)`
+    }
+  }
+
+  function getSwiperIndicatorSpacingStyle (index, spacing, vertical) {
+    if (!index) return
+    return {
+      [vertical ? 'marginTop' : 'marginLeft']: `${spacing}px`
+    }
+  }
+
   BScroll.use(Slide)
   BScroll.use(ObserveDOM)
 
@@ -21,6 +41,34 @@
         type: String,
         default: '#000000'
       },
+      indicatorMargin: {
+        type: Number,
+        default: 10
+      },
+      indicatorSpacing: {
+        type: Number,
+        default: 4
+      },
+      indicatorRadius: {
+        type: Number,
+        default: 4
+      },
+      indicatorWidth: {
+        type: Number,
+        default: 8
+      },
+      indicatorHeight: {
+        type: Number,
+        default: 8
+      },
+      indicatorAlignment: {
+        type: [Array, String],
+        default: 'auto'
+      },
+      indicatorOffset: {
+        type: Array,
+        default: () => [0, 0]
+      },
       autoplay: Boolean,
       current: {
         type: Number,
@@ -99,6 +147,9 @@
       _nextMargin () {
         return processSize(this.nextMargin) || 0
       },
+      _indicatorStyle () {
+        return getSwiperIndicatorStyle(this.indicatorAlignment, this.indicatorOffset, this.indicatorMargin, this.vertical)
+      }
     },
     updated () {
       this.setCurrentChildLength()
@@ -297,17 +348,21 @@
           dotsItems.push(
             createElement('span', {
               class: 'mpx-swiper-dots-item',
-              style: {
-                backgroundColor: i === this.currentIndex ? this.indicatorActiveColor : this.indicatorColor
-              }
+              style: Object.assign({
+                backgroundColor: i === this.currentIndex ? this.indicatorActiveColor : this.indicatorColor,
+                width: `${this.indicatorWidth}px`,
+                height: `${this.indicatorHeight}px`,
+                borderRadius: `${this.indicatorRadius}px`
+              }, getSwiperIndicatorSpacingStyle(i, this.indicatorSpacing, this.vertical))
             })
           )
         }
         const dots = createElement('div', {
           class: {
             'mpx-swiper-dots': true,
             vertical: this.vertical
-          }
+          },
+          style: this._indicatorStyle
         }, dotsItems)
         children.push(dots)
       }
@@ -343,22 +398,12 @@
 
   .mpx-swiper-dots
     position absolute
-    right 50%
-    bottom 4px
-    transform translateX(50%)
     display flex
 
     &.vertical
-      right 4px
-      bottom 50%
-      transform translateY(50%)
       flex-direction column
 
     .mpx-swiper-dots-item
       display block
-      margin 4px
-      width 8px
-      height 8px
-      border-radius 50%
 
 </style>