upd: swiper demo style

src/packages/swiper/demo.vue

@@ -3,102 +3,38 @@
     <h2>基本用法</h2>
     <view class="demo-box">
       <nut-swiper
-        :init-page="state.page"
+        :init-page="page"
         :pagination-visible="true"
         pagination-color="#426543"
-        auto-play="3000"
       >
-        <nut-swiper-item>
-          <img
-            src="https://m.360buyimg.com/mobilecms/s700x280_jfs/t1/152158/32/19170/280589/6035429fE08208901/024578cf04ce3b47.jpg!cr_1125x445_0_171"
-            alt=""
-          />
-        </nut-swiper-item>
-        <nut-swiper-item>
-          <img
-            src="https://m.360buyimg.com/mobilecms/s700x280_jfs/t1/159602/22/7999/126515/6035f371E6f95bfee/559cb1ee48c962c9.jpg"
-            alt=""
-          />
-        </nut-swiper-item>
-        <nut-swiper-item>
-          <img
-            src="https://m.360buyimg.com/mobilecms/s700x280_jfs/t1/166846/13/7534/136440/60338b5cEd491d8b3/9e5527429136ab86.jpg"
-            alt=""
-          />
-        </nut-swiper-item>
-        <nut-swiper-item>
-          <img
-            src="https://m.360buyimg.com/mobilecms/s700x280_jfs/t1/145433/27/14059/141680/5facf066Ec402354c/530d5a316aed55fc.jpg!cr_1125x445_0_171"
-            alt=""
-          />
+        <nut-swiper-item v-for="item in list" :key="item">
+          <img :src="item" alt="" />
         </nut-swiper-item>
       </nut-swiper>
     </view>
     <h2>自定义大小</h2>
     <view class="demo-box">
-      <nut-swiper :init-page="state.page2" :loop="false" width="300">
-        <nut-swiper-item>
-          <img
-            src="https://m.360buyimg.com/mobilecms/s700x280_jfs/t1/152158/32/19170/280589/6035429fE08208901/024578cf04ce3b47.jpg!cr_1125x445_0_171"
-            alt=""
-          />
-        </nut-swiper-item>
-        <nut-swiper-item>
-          <img
-            src="https://m.360buyimg.com/mobilecms/s700x280_jfs/t1/159602/22/7999/126515/6035f371E6f95bfee/559cb1ee48c962c9.jpg"
-            alt=""
-          />
-        </nut-swiper-item>
-        <nut-swiper-item>
-          <img
-            src="https://m.360buyimg.com/mobilecms/s700x280_jfs/t1/166846/13/7534/136440/60338b5cEd491d8b3/9e5527429136ab86.jpg"
-            alt=""
-          />
-        </nut-swiper-item>
-        <nut-swiper-item>
-          <img
-            src="https://m.360buyimg.com/mobilecms/s700x280_jfs/t1/145433/27/14059/141680/5facf066Ec402354c/530d5a316aed55fc.jpg!cr_1125x445_0_171"
-            alt=""
-          />
+      <nut-swiper :init-page="page2" :loop="false" width="300">
+        <nut-swiper-item v-for="item in list" :key="item">
+          <img :src="item" alt="" />
         </nut-swiper-item>
       </nut-swiper>
     </view>
     <h2>自定义指示器</h2>
     <view class="demo-box">
-      <nut-swiper :init-page="state.page3" :loop="true" @change="change">
-        <nut-swiper-item>
-          <img
-            src="https://m.360buyimg.com/mobilecms/s700x280_jfs/t1/152158/32/19170/280589/6035429fE08208901/024578cf04ce3b47.jpg!cr_1125x445_0_171"
-            alt=""
-          />
-        </nut-swiper-item>
-        <nut-swiper-item>
-          <img
-            src="https://m.360buyimg.com/mobilecms/s700x280_jfs/t1/159602/22/7999/126515/6035f371E6f95bfee/559cb1ee48c962c9.jpg"
-            alt=""
-          />
-        </nut-swiper-item>
-        <nut-swiper-item>
-          <img
-            src="https://m.360buyimg.com/mobilecms/s700x280_jfs/t1/166846/13/7534/136440/60338b5cEd491d8b3/9e5527429136ab86.jpg"
-            alt=""
-          />
-        </nut-swiper-item>
-        <nut-swiper-item>
-          <img
-            src="https://m.360buyimg.com/mobilecms/s700x280_jfs/t1/145433/27/14059/141680/5facf066Ec402354c/530d5a316aed55fc.jpg!cr_1125x445_0_171"
-            alt=""
-          />
+      <nut-swiper :init-page="page3" :loop="true" @change="change">
+        <nut-swiper-item v-for="item in list" :key="item">
+          <img :src="item" alt="" />
         </nut-swiper-item>
         <template v-slot:page>
-          <div class="page"> {{ state.current }}/4 </div>
+          <div class="page"> {{ current }}/4 </div>
         </template>
       </nut-swiper>
     </view>
     <h2>垂直方向</h2>
     <view class="demo-box">
       <nut-swiper
-        :init-page="state.page4"
+        :init-page="page4"
         :loop="true"
         auto-play="3000"
         direction="vertical"
@@ -106,29 +42,8 @@
         :pagination-visible="true"
         style="height: 150px"
       >
-        <nut-swiper-item>
-          <img
-            src="https://m.360buyimg.com/mobilecms/s700x280_jfs/t1/152158/32/19170/280589/6035429fE08208901/024578cf04ce3b47.jpg!cr_1125x445_0_171"
-            alt=""
-          />
-        </nut-swiper-item>
-        <nut-swiper-item>
-          <img
-            src="https://m.360buyimg.com/mobilecms/s700x280_jfs/t1/159602/22/7999/126515/6035f371E6f95bfee/559cb1ee48c962c9.jpg"
-            alt=""
-          />
-        </nut-swiper-item>
-        <nut-swiper-item>
-          <img
-            src="https://m.360buyimg.com/mobilecms/s700x280_jfs/t1/166846/13/7534/136440/60338b5cEd491d8b3/9e5527429136ab86.jpg"
-            alt=""
-          />
-        </nut-swiper-item>
-        <nut-swiper-item>
-          <img
-            src="https://m.360buyimg.com/mobilecms/s700x280_jfs/t1/145433/27/14059/141680/5facf066Ec402354c/530d5a316aed55fc.jpg!cr_1125x445_0_171"
-            alt=""
-          />
+        <nut-swiper-item v-for="item in list" :key="item">
+          <img :src="item" alt="" />
         </nut-swiper-item>
       </nut-swiper>
     </view>
@@ -136,7 +51,7 @@
 </template>
 
 <script lang="ts">
-import { reactive } from 'vue';
+import { reactive, toRefs } from 'vue';
 import { createComponent } from '@/utils/create';
 const { createDemo } = createComponent('swiper');
 export default createDemo({
@@ -147,13 +62,19 @@ export default createDemo({
       page2: 0,
       page3: 0,
       page4: 0,
-      current: 1
+      current: 1,
+      list: [
+        'https://m.360buyimg.com/mobilecms/s700x280_jfs/t1/128047/5/6706/178631/5f068cefE53bff564/4dd870d8932daecf.jpg',
+        'https://m.360buyimg.com/mobilecms/s700x280_jfs/t1/159602/22/7999/126515/6035f371E6f95bfee/559cb1ee48c962c9.jpg',
+        'https://m.360buyimg.com/mobilecms/s700x280_jfs/t1/166846/13/7534/136440/60338b5cEd491d8b3/9e5527429136ab86.jpg',
+        'https://m.360buyimg.com/mobilecms/s700x280_jfs/t1/145433/27/14059/141680/5facf066Ec402354c/530d5a316aed55fc.jpg'
+      ]
     });
     const change = (index: number) => {
       state.current = index + 1;
     };
     return {
-      state,
+      ...toRefs(state),
       change
     };
   }
@@ -162,7 +83,7 @@ export default createDemo({
 
 <style lang="scss" scoped>
 .demo-box {
-  .swiper-item {
+  .nut-swiper-item {
     line-height: 150px;
     img {
       width: 100%;

src/packages/swiper/doc.md

@@ -114,9 +114,9 @@ app.use(Swiper);
 
 | 参数                   | 说明                                                        | 类型           | 默认值      |
 | ---------------------- | ----------------------------------------------------------- | -------------- | ----------- |
-| width                   | 轮播卡片的宽度                                            | Number、String        | window.innerWidth       |
+| width                   | 轮播卡片的宽度           | Number、String        | window.innerWidth       |
 | height                | 轮播卡片的高度                                                    | String、Number | 0        |
-| direction               | 轮播方向                                            | String | 'horizontal'         |
+| direction               | 轮播方向,可选值`horizontal`,`vertical`     | String | 'horizontal'         |
 | pagination-visible          | 分页指示器是否展示                                              | Boolean         | false           |
 | pagination-color         | 分页指示器选中的颜色                                              | String  | '#fff'           |
 | loop           | 是否循环轮播                                                | Boolean        | true       |
@@ -137,7 +137,7 @@ app.use(Swiper);
 
 
 
-### 向外暴露的方法
+### API
 
 | 事件名           | 说明                   | 参数     |
 | ---------------- | ---------------------- | ------------ |

src/packages/swiper/index.scss

@@ -1,20 +1,20 @@
-.swiper-cont {
+.nut-swiper {
   position: relative;
   z-index: 1;
   display: flex;
   transition-property: transform;
   box-sizing: content-box;
   overflow: hidden;
-  .swiper-inner {
+  &-inner {
     display: flex;
     height: 100%;
-    &.swiper-vertical {
-      -webkit-box-orient: vertical;
-      -webkit-box-direction: normal;
-      flex-direction: column;
-    }
   }
-  .swiper-pagination {
+  &-vertical {
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+    flex-direction: column;
+  }
+  &-pagination {
     display: flex;
     position: absolute;
     left: 50%;

src/packages/swiper/index.vue

@@ -1,26 +1,32 @@
 <template>
   <view
     ref="container"
-    class="swiper-cont"
+    :class="classes"
     @touchstart="onTouchStart"
     @touchmove="onTouchMove"
     @touchend="onTouchEnd"
     @touchcancel="onTouchEnd"
   >
     <view
-      :class="{ 'swiper-inner': true, 'swiper-vertical': isVertical }"
+      :class="{
+        [`${componentName}-inner`]: true,
+        [`${componentName}-vertical`]: isVertical
+      }"
       :style="state.style"
     >
       <slot></slot>
     </view>
     <slot name="page"></slot>
-    <view class="swiper-pagination" v-if="paginationVisible && !slots.page">
+    <view
+      :class="{ [`${componentName}-pagination`]: true }"
+      v-if="paginationVisible && !slots.page"
+    >
       <i
         :style="{
           backgroundColor: activePagination === index ? paginationColor : '#ddd'
         }"
         v-for="(item, index) in state.children.length"
-        v-bind:key="index"
+        :key="index"
       />
     </view>
   </view>
@@ -44,7 +50,7 @@ import {
 import { createComponent } from '@/utils/create';
 import { useTouch } from './use-touch';
 import { useExpose } from './use-expose';
-const { create } = createComponent('swiper');
+const { create, componentName } = createComponent('swiper');
 import swiperItem from '@/packages/swiperitem/index.vue';
 export default create({
   children: [swiperItem],
@@ -118,6 +124,13 @@ export default create({
 
     const touch = useTouch();
 
+    const classes = computed(() => {
+      const prefixCls = componentName;
+      return {
+        [prefixCls]: true
+      };
+    });
+
     const isVertical = computed(() => props.direction === 'vertical');
 
     const delTa = computed(() => {
@@ -170,11 +183,11 @@ export default create({
       return Math.min(Math.max(num, min), max);
     };
 
-    const requestFrame = fn => {
+    const requestFrame = (fn: FrameRequestCallback) => {
       window.requestAnimationFrame.call(window, fn);
     };
 
-    const getOffset = (active, offset = 0) => {
+    const getOffset = (active: number, offset = 0) => {
       let currentPosition = active * size.value;
       if (!props.loop) {
         currentPosition = Math.min(currentPosition, -minOffset.value);
@@ -188,7 +201,7 @@ export default create({
       return targetOffset;
     };
 
-    const getActive = pace => {
+    const getActive = (pace: number) => {
       const { active } = state;
       if (pace) {
         if (props.loop) {
@@ -436,7 +449,9 @@ export default create({
 
     return {
       state,
+      classes,
       container,
+      componentName,
       isVertical,
       slots,
       activePagination,

src/packages/swiperitem/index.scss

@@ -1,3 +1,3 @@
-.swiper-item {
+.nut-swiper-item {
   height: 100%;
 }

src/packages/swiperitem/index.vue

@@ -1,14 +1,19 @@
 <template>
-  <view class="swiper-item" :style="style">
+  <view :class="classes" :style="style">
     <slot></slot>
   </view>
 </template>
 
 <script lang="ts">
-import { computed, reactive, inject, getCurrentInstance } from 'vue';
+import { computed, reactive, inject, getCurrentInstance, watch } from 'vue';
 import { createComponent } from '@/utils/create';
 import { useExpose } from '@/packages/swiper/use-expose';
-const { create } = createComponent('swiper-item');
+const { create, componentName } = createComponent('swiper-item');
+interface IStyle {
+  width?: string;
+  height?: string;
+  transform?: string;
+}
 export default create({
   props: {},
   setup(props, { slots }) {
@@ -17,8 +22,16 @@ export default create({
     const state = reactive({
       offset: 0
     });
+
+    const classes = computed(() => {
+      const prefixCls = componentName;
+      return {
+        [prefixCls]: true
+      };
+    });
+
     const style = computed(() => {
-      const style = {};
+      const style: IStyle = {};
       const direction = parent?.props.direction;
       if (parent?.size.value) {
         style[
@@ -42,7 +55,8 @@ export default create({
     useExpose({ setOffset });
 
     return {
-      style
+      style,
+      classes
     };
   }
 });