feat: ✨ Swiper 轮播组件增加value-key用于自定义目标字段属性名 (#485)

✅ Closes: #410

Author: Moonofweisheng

docs/component/swiper.md

@@ -186,6 +186,27 @@ function onChange(e) {
 }
 ```
 
+## 指定valueKey <el-tag text style="vertical-align: middle;margin-left:8px;" effect="plain">$LOWEST_VERSION$</el-tag>
+
+通过`value-key` 属性指定 `list` 中每个对象图片地址字段，默认为 `value`。
+
+
+```html
+<wd-swiper value-key="url" :list="customSwiperList" autoplay v-model:current="current" @click="handleClick" @change="onChange"></wd-swiper>
+```
+```ts
+const current = ref<number>(0)
+
+const customSwiperList = ref([
+  { url: 'https://registry.npmmirror.com/wot-design-uni-assets/*/files/redpanda.jpg' },
+  { url: 'https://registry.npmmirror.com/wot-design-uni-assets/*/files/capybara.jpg' },
+  { url: 'https://registry.npmmirror.com/wot-design-uni-assets/*/files/panda.jpg' },
+  { url: 'https://registry.npmmirror.com/wot-design-uni-assets/*/files/moon.jpg' }
+])
+```
+
+
+
 ## 属性控制切换
 
 ```html
@@ -228,7 +249,9 @@ const isLoop = ref(false)
 | snapToEdge           | 边距是否应用到第一个、最后一个元素                     | `boolean`                         | -                                                                                                      | false        | 0.1.22   |
 | indicator            | 指示器全部配置                                         | `SwiperIndicatorProps \| boolean` | -                                                                                                      | true         | 0.1.22   |
 | imageMode            | 图片裁剪、缩放的模式                                   | `string`                          | 参考官方文档[mode](https://uniapp.dcloud.net.cn/component/image.html#mode-%E6%9C%89%E6%95%88%E5%80%BC) | `aspectFill` | 0.1.55   |
-| customStyle          | 外部自定义样式                                         | `string`                          | -                                                                                                      | ''           | 0.1.22   |
+| customStyle          | 外部自定义样式        | `string`       | -       | ''           | 0.1.22   |
+| value-key          | 选项对象中，value 对应的 key        | `string`       | -       | `value`           | $LOWEST_VERSION$   |
+
 
 ### DirectionType
 
@@ -263,7 +286,7 @@ const isLoop = ref(false)
 
 | 事件名称 | 说明             | 参数                                                        | 最低版本 |
 | -------- | ---------------- | ----------------------------------------------------------- | -------- |
-| click    | 点击轮播项时触发 | `(index: number)`                                           | 0.1.22   |
+| click    | 点击轮播项时触发 | `(index: number, item: SwiperList \| string)`                                           | 0.1.22   |
 | change   | 轮播切换时触发   | `(current: number, source: 'autoplay' \| 'touch' \| 'nav')	` | 0.1.22   |
 
 ## Slot

src/pages/swiper/Index.vue

@@ -110,6 +110,10 @@
       </wd-swiper>
     </demo-block>
 
+    <demo-block title="指定valueKey">
+      <wd-swiper value-key="url" :list="customSwiperList" autoplay v-model:current="current9" @click="handleClick" @change="onChange"></wd-swiper>
+    </demo-block>
+
     <demo-block title="属性控制切换">
       <wd-swiper :loop="isLoop" :autoplay="false" :list="swiperList" v-model:current="current8" />
       <wd-gap />
@@ -138,6 +142,13 @@ const swiperList = ref([
   'https://registry.npmmirror.com/wot-design-uni-assets/*/files/meng.jpg'
 ])
 
+const customSwiperList = ref([
+  { url: 'https://registry.npmmirror.com/wot-design-uni-assets/*/files/redpanda.jpg' },
+  { url: 'https://registry.npmmirror.com/wot-design-uni-assets/*/files/capybara.jpg' },
+  { url: 'https://registry.npmmirror.com/wot-design-uni-assets/*/files/panda.jpg' },
+  { url: 'https://registry.npmmirror.com/wot-design-uni-assets/*/files/moon.jpg' }
+])
+
 const current = ref<number>(0)
 const current1 = ref<number>(1)
 const current2 = ref<number>(2)
@@ -147,6 +158,7 @@ const current5 = ref<number>(0)
 const current6 = ref<number>(0)
 const current7 = ref<number>(0)
 const current8 = ref<number>(0)
+const current9 = ref<number>(0)
 
 const isLoop = ref(false)
 

src/uni_modules/wot-design-uni/components/wd-swiper/types.ts

@@ -20,7 +20,7 @@ export type IndicatorPositionType = 'left' | 'top-left' | 'top' | 'top-right' |
 
 export interface SwiperList {
   [key: string]: any
-  value: string
+  value?: string
 }
 
 export const swiperProps = {
@@ -143,7 +143,10 @@ export const swiperProps = {
    * 默认值：'aspectFill'
    */
   imageMode: makeStringProp<ImageMode>('aspectFill'),
-
+  /**
+   * 选项对象中，value 对应的 key
+   */
+  valueKey: makeStringProp('value'),
   /**
    * 自定义指示器类名
    * 类型：string

src/uni_modules/wot-design-uni/components/wd-swiper/wd-swiper.vue

@@ -17,9 +17,9 @@
       @change="handleChange"
       @animationfinish="handleAnimationfinish"
     >
-      <swiper-item v-for="(item, index) in list" :key="index" class="wd-swiper__item" @click="handleClick(index)">
+      <swiper-item v-for="(item, index) in list" :key="index" class="wd-swiper__item" @click="handleClick(index, item)">
         <image
-          :src="isObj(item) ? item.value : item"
+          :src="isObj(item) ? item[valueKey] : item"
           :class="`wd-swiper__image ${customImageClass} ${getCustomImageClass(navCurrent, index, list)}`"
           :style="{ height: addUnit(height) }"
           :mode="imageMode"
@@ -161,9 +161,10 @@ function handleAnimationfinish(e: { detail: { current: any; source: string } })
 /**
  * 点击滑块事件
  * @param index 点击的滑块下标
+ * @param item 点击的滑块内容
  */
-function handleClick(index: number) {
-  emit('click', { index })
+function handleClick(index: number, item: string | SwiperList) {
+  emit('click', { index, item })
 }
 
 function handleIndicatorChange(e: { dir: any; source: string }) {