feat(swiper): 新增 pagination-unselected-color 属性 (#2803)

close #2688
jdf2e · Jan 2, 2024 · f2e7d7c · f2e7d7c
1 parent 896b257
commit f2e7d7c
Show file tree

Hide file tree

Showing 7 changed files with 48 additions and 7 deletions.
diff --git a/packages/nutui-taro-demo/src/exhibition/pages/swiper/index.vue b/packages/nutui-taro-demo/src/exhibition/pages/swiper/index.vue
@@ -2,7 +2,13 @@
   <Demo>
     <h2>基础用法</h2>
     <view class="demo-box">
-      <nut-swiper :init-page="state.page" :pagination-visible="true" pagination-color="#426543" auto-play="2000">
+      <nut-swiper
+        :init-page="state.page"
+        :pagination-visible="true"
+        pagination-color="#426543"
+        pagination-unselected-color="#808080"
+        auto-play="2000"
+      >
         <nut-swiper-item v-for="item in state.list" :key="item">
           <img :src="item" alt="" />
         </nut-swiper-item>

diff --git a/src/packages/__VUE/swiper/demo.vue b/src/packages/__VUE/swiper/demo.vue
@@ -2,7 +2,13 @@
   <div class="demo">
     <h2>{{ translate('basic') }}</h2>
     <view class="demo-box">
-      <nut-swiper :init-page="state.page" :pagination-visible="true" pagination-color="#426543" auto-play="2000">
+      <nut-swiper
+        :init-page="state.page"
+        :pagination-visible="true"
+        pagination-color="#426543"
+        pagination-unselected-color="#808080"
+        auto-play="2000"
+      >
         <nut-swiper-item v-for="item in state.list" :key="item"> <img :src="item" alt="" /> </nut-swiper-item>
       </nut-swiper>
     </view>

diff --git a/src/packages/__VUE/swiper/doc.en-US.md b/src/packages/__VUE/swiper/doc.en-US.md
@@ -26,7 +26,13 @@ app.use(SwiperItem);
 
 ```vue
 <template>
-  <nut-swiper :init-page="page" :pagination-visible="true" pagination-color="#426543" auto-play="3000">
+  <nut-swiper
+    :init-page="page"
+    :pagination-visible="true"
+    pagination-color="#426543"
+    pagination-unselected-color="#808080"
+    auto-play="3000"
+  >
     <nut-swiper-item>
       <img src="https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg" alt="" />
     </nut-swiper-item>
@@ -449,6 +455,7 @@ const page = ref(2);
 | direction | Rotation direction, optional value：`horizontal`,`vertical` | string | `'horizontal'` |
 | pagination-visible | Is the paging indicator displayed | boolean | `false` |
 | pagination-color | The color selected by the pagination indicator | string | `'#fff'` |
+| pagination-unselected-color | The color unselected by the pagination indicator | string | `'#ddd'` |
 | loop | Whether to rotate | boolean | `true` |
 | duration | Animation duration（Unit ms） | number \| string | `500` |
 | auto-play | Automatic rotation duration, 0 means no automatic rotation | number \| string | `0` |

diff --git a/src/packages/__VUE/swiper/doc.md b/src/packages/__VUE/swiper/doc.md
@@ -26,7 +26,13 @@ app.use(SwiperItem);
 
 ```vue
 <template>
-  <nut-swiper :init-page="page" :pagination-visible="true" pagination-color="#426543" auto-play="3000">
+  <nut-swiper
+    :init-page="page"
+    :pagination-visible="true"
+    pagination-color="#426543"
+    pagination-unselected-color="#808080"
+    auto-play="3000"
+  >
     <nut-swiper-item>
       <img src="https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg" alt="" />
     </nut-swiper-item>
@@ -449,6 +455,7 @@ const page = ref(2);
 | direction | 轮播方向,可选值`horizontal`,`vertical` | string | `'horizontal'` |
 | pagination-visible | 分页指示器是否展示 | boolean | `false` |
 | pagination-color | 分页指示器选中的颜色 | string | `'#fff'` |
+| pagination-unselected-color | 分页指示器没有选中的颜色 | string | `'#ddd'` |
 | loop | 是否循环轮播 | boolean | `true` |
 | duration | 动画时长（单位是 ms） | number \| string | `500` |
 | auto-play | 自动轮播时长，0 表示不会自动轮播 | number \| string | `0` |

diff --git a/src/packages/__VUE/swiper/doc.taro.md b/src/packages/__VUE/swiper/doc.taro.md
@@ -26,7 +26,13 @@ app.use(SwiperItem);
 
 ```vue
 <template>
-  <nut-swiper :init-page="page" :pagination-visible="true" pagination-color="#426543" auto-play="3000">
+  <nut-swiper
+    :init-page="page"
+    :pagination-visible="true"
+    pagination-color="#426543"
+    pagination-unselected-color="#808080"
+    auto-play="3000"
+  >
     <nut-swiper-item>
       <img src="https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg" alt="" />
     </nut-swiper-item>
@@ -440,6 +446,7 @@ const page = ref(2);
 | direction | 轮播方向,可选值`horizontal`,`vertical` | string | `'horizontal'` |
 | pagination-visible | 分页指示器是否展示 | boolean | `false` |
 | pagination-color | 分页指示器选中的颜色 | string | `'#fff'` |
+| pagination-unselected-color | 分页指示器没有选中的颜色 | string | `'#ddd'` |
 | loop | 是否循环轮播 | boolean | `true` |
 | duration | 动画时长（单位是 ms） | number \| string | `500` |
 | auto-play | 自动轮播时长，0 表示不会自动轮播 | number \| string | `0` |

diff --git a/src/packages/__VUE/swiper/index.taro.vue b/src/packages/__VUE/swiper/index.taro.vue
@@ -18,7 +18,7 @@
         v-for="(item, index) in state.children.length"
         :key="index"
         :style="{
-          backgroundColor: activePagination === index ? paginationColor : '#ddd'
+          backgroundColor: activePagination === index ? paginationColor : paginationUnselectedColor
         }"
         :class="{ active: activePagination === index }"
       />
@@ -94,6 +94,10 @@ export default create({
     isStopPropagation: {
       type: Boolean,
       default: true
+    },
+    paginationUnselectedColor: {
+      type: String,
+      default: '#ddd'
     }
   },
   emits: ['change'],

diff --git a/src/packages/__VUE/swiper/index.vue b/src/packages/__VUE/swiper/index.vue
@@ -16,7 +16,7 @@
         v-for="(item, index) in state.children.length"
         :key="index"
         :style="{
-          backgroundColor: activePagination === index ? paginationColor : '#ddd'
+          backgroundColor: activePagination === index ? paginationColor : paginationUnselectedColor
         }"
         :class="{ active: activePagination === index }"
       />
@@ -91,6 +91,10 @@ export default create({
     isStopPropagation: {
       type: Boolean,
       default: true
+    },
+    paginationUnselectedColor: {
+      type: String,
+      default: '#ddd'
     }
   },
   emits: ['change'],