Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Merged
merged 1 commit into from
Aug 1, 2024
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 25 additions & 2 deletions docs/component/swiper.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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

Expand Down Expand Up @@ -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
Expand Down
12 changes: 12 additions & 0 deletions src/pages/swiper/Index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 />
Expand Down Expand Up @@ -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)
Expand All @@ -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)

Expand Down
7 changes: 5 additions & 2 deletions src/uni_modules/wot-design-uni/components/wd-swiper/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {
Expand Down Expand Up @@ -143,7 +143,10 @@ export const swiperProps = {
* 默认值：'aspectFill'
*/
imageMode: makeStringProp<ImageMode>('aspectFill'),

/**
* 选项对象中，value 对应的 key
*/
valueKey: makeStringProp('value'),
/**
* 自定义指示器类名
* 类型：string
Expand Down
9 changes: 5 additions & 4 deletions src/uni_modules/wot-design-uni/components/wd-swiper/wd-swiper.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -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 }) {
Expand Down