From da5d48502e9203c42b011b0b93b0890e5494b2c1 Mon Sep 17 00:00:00 2001 From: leejimqiu Date: Thu, 18 May 2023 17:03:39 +0800 Subject: [PATCH] feat(image-viewer): finish new version --- src/_common | 2 +- .../__test__/__snapshots__/demo.test.jsx.snap | 24 +- .../__test__/__snapshots__/demo.test.jsx.snap | 430 ++++-------------- src/image-viewer/__test__/demo.test.jsx | 12 +- src/image-viewer/__test__/index.test.jsx | 51 +-- src/image-viewer/demos/background.vue | 35 -- src/image-viewer/demos/base.vue | 31 +- src/image-viewer/demos/closeBtn.vue | 28 -- src/image-viewer/demos/closeEvent.vue | 32 -- src/image-viewer/demos/imageList.vue | 43 -- src/image-viewer/demos/initialIndex.vue | 32 -- src/image-viewer/demos/mobile.vue | 17 +- src/image-viewer/demos/operation.vue | 14 + src/image-viewer/image-viewer.en-US.md | 26 ++ src/image-viewer/image-viewer.md | 19 +- src/image-viewer/image-viewer.vue | 121 +++-- src/image-viewer/props.ts | 21 +- src/image-viewer/style/index.js | 2 +- src/image-viewer/type.ts | 24 +- .../__test__/__snapshots__/demo.test.jsx.snap | 64 +-- 20 files changed, 275 insertions(+), 753 deletions(-) delete mode 100644 src/image-viewer/demos/background.vue delete mode 100644 src/image-viewer/demos/closeBtn.vue delete mode 100644 src/image-viewer/demos/closeEvent.vue delete mode 100644 src/image-viewer/demos/imageList.vue delete mode 100644 src/image-viewer/demos/initialIndex.vue create mode 100644 src/image-viewer/demos/operation.vue create mode 100644 src/image-viewer/image-viewer.en-US.md diff --git a/src/_common b/src/_common index 2c821de1a..ba6c01c0d 160000 --- a/src/_common +++ b/src/_common @@ -1 +1 @@ -Subproject commit 2c821de1acae3bdb5e2ad566b8f785fdd9d32d73 +Subproject commit ba6c01c0d05fd710b4c566caaae2b613ff34edf0 diff --git a/src/form/__test__/__snapshots__/demo.test.jsx.snap b/src/form/__test__/__snapshots__/demo.test.jsx.snap index 64ec9d602..780b9fa0c 100644 --- a/src/form/__test__/__snapshots__/demo.test.jsx.snap +++ b/src/form/__test__/__snapshots__/demo.test.jsx.snap @@ -1423,13 +1423,7 @@ exports[`Form > Form horizontalVue demo works fine 1`] = ` multiple="" type="file" /> - + @@ -3036,13 +3030,7 @@ exports[`Form > Form mobileVue demo works fine 1`] = ` multiple="" type="file" /> - + @@ -4514,13 +4502,7 @@ exports[`Form > Form verticalVue demo works fine 1`] = ` multiple="" type="file" /> - + diff --git a/src/image-viewer/__test__/__snapshots__/demo.test.jsx.snap b/src/image-viewer/__test__/__snapshots__/demo.test.jsx.snap index 3d3e2c440..1ef41c3ee 100644 --- a/src/image-viewer/__test__/__snapshots__/demo.test.jsx.snap +++ b/src/image-viewer/__test__/__snapshots__/demo.test.jsx.snap @@ -1,140 +1,13 @@ // Vitest Snapshot v1 -exports[`ImageViewer > ImageViewer backgroundVue demo works fine 1`] = ` -
-
-
- - backgroundColor: 设置遮罩的背景颜色 - -
- -
-
- - -
- -
- - - - -
- -
- -
-
-`; - exports[`ImageViewer > ImageViewer baseVue demo works fine 1`] = `
- - -
-`; - -exports[`ImageViewer > ImageViewer closeBtnVue demo works fine 1`] = ` -
- - -
-`; - -exports[`ImageViewer > ImageViewer closeEventVue demo works fine 1`] = ` -
+ - -
-`; - -exports[`ImageViewer > ImageViewer imageListVue demo works fine 1`] = ` -
-
-
- - 图片数组：images - -
- -
-
- - -
- -
- - - - -
- -
- -
-
-`; - -exports[`ImageViewer > ImageViewer initialIndexVue demo works fine 1`] = ` -
-
-
- - initialIndex: 默认展示第二张图片 - -
- -
-
- - -
- -
- - - - -
- -
- -
+ +
`; exports[`ImageViewer > ImageViewer mobileVue demo works fine 1`] = `

ImageViewer 图片预览

图片全屏放大预览效果，包含全屏背景色、页码位置样式、增加操作等规范

ImageViewer mobileVue demo works fine 1`] = `

- 01 类型 + 01 组件类型

ImageViewer mobileVue demo works fine 1`] = `

-
- - -
-
+ + + + + +
+
+
+
+ +

- -

-
-
+
+
+ + + - -
+ + + + +
`; + +exports[`ImageViewer > ImageViewer operationVue demo works fine 1`] = ` +
+ + + + +
+`; diff --git a/src/image-viewer/__test__/demo.test.jsx b/src/image-viewer/__test__/demo.test.jsx index d36ccaf3f..05f039a0e 100644 --- a/src/image-viewer/__test__/demo.test.jsx +++ b/src/image-viewer/__test__/demo.test.jsx @@ -3,22 +3,14 @@ */ import { mount } from '@vue/test-utils'; -import backgroundVue from '@/image-viewer/demos/background.vue'; import baseVue from '@/image-viewer/demos/base.vue'; -import closeBtnVue from '@/image-viewer/demos/closeBtn.vue'; -import closeEventVue from '@/image-viewer/demos/closeEvent.vue'; -import imageListVue from '@/image-viewer/demos/imageList.vue'; -import initialIndexVue from '@/image-viewer/demos/initialIndex.vue'; import mobileVue from '@/image-viewer/demos/mobile.vue'; +import operationVue from '@/image-viewer/demos/operation.vue'; const mapper = { - backgroundVue, baseVue, - closeBtnVue, - closeEventVue, - imageListVue, - initialIndexVue, mobileVue, + operationVue, }; describe('ImageViewer', () => { diff --git a/src/image-viewer/__test__/index.test.jsx b/src/image-viewer/__test__/index.test.jsx index 3d105cb2a..063ace6b5 100644 --- a/src/image-viewer/__test__/index.test.jsx +++ b/src/image-viewer/__test__/index.test.jsx @@ -1,6 +1,6 @@ import { nextTick, ref } from 'vue'; import { mount } from '@vue/test-utils'; -import { CloseCircleFilledIcon, AddCircleIcon } from 'tdesign-icons-vue-next'; +import { AddCircleIcon } from 'tdesign-icons-vue-next'; import { describe, it, vi } from 'vitest'; import ImageViewer from '../image-viewer.vue'; import { Swiper } from '../../swiper'; @@ -14,13 +14,13 @@ const images = ref([ describe('ImageViewer', () => { describe('props', () => { - it(': closeBtn', async () => { + it(':closeBtn', async () => { const wrapper = mount(); - expect(wrapper.findComponent(CloseCircleFilledIcon).exists()).toBe(false); + expect(wrapper.find('.t-image-viewer__nav-close').exists()).toBe(false); }); - it(': images', async () => { + it(':images', async () => { const emptyImages = mount(); expect(emptyImages.find('.t-swiper-item').exists()).toBe(false); @@ -34,7 +34,7 @@ describe('ImageViewer', () => { expect(wrapper.findAll('.t-swiper-item').length - 2).toBe(images.value.length); }); - it(': maxZoom', async () => { + it(':maxZoom', async () => { const wrapper = mount(); const target = wrapper.find('.t-swiper-item'); @@ -57,13 +57,7 @@ describe('ImageViewer', () => { trigger(target, 'touchend', 50, 50); }); - it(': showIndex', async () => { - const wrapper = mount(); - - expect(wrapper.find('.t-swiper__pagination-fraction').exists()).toBe(true); - }); - - it(': visible', async () => { + it(':visible', async () => { const visible = ref(false); const wrapper = mount(); @@ -73,7 +67,7 @@ describe('ImageViewer', () => { }); describe('slots', () => { - it(': closeBtn', () => { + it(':closeBtn', () => { const wrapper = mount( } />, ); @@ -83,38 +77,11 @@ describe('ImageViewer', () => { }); describe('event', () => { - it(': close', async () => { + it(':close', async () => { const wrapper = mount(); - await wrapper.findComponent(CloseCircleFilledIcon).trigger('click'); + await wrapper.find('.t-image-viewer__nav-close').trigger('click'); expect(wrapper.emitted()).toHaveProperty('close'); }); }); - - describe('function', () => { - it(': onClose', async () => { - const onClose = vi.fn(); - - const wrapper = mount(); - - await wrapper.findComponent(CloseCircleFilledIcon).trigger('click'); - expect(onClose).toHaveBeenCalled(); - }); - - // it(': onIndexChange', async () => { - // const onIndexChange = vi.fn(); - - // const wrapper = mount(); - - // const target = wrapper.find('.t-swiper__container'); - - // await trigger(target, 'touchstart', 0, 0); - // await trigger(target, 'touchmove', 30, 0); - // await trigger(target, 'touchmove', 60, 0); - // await trigger(target, 'touchmove', 120, 0); - // await trigger(target, 'touchend', 120, 0); - - // expect(wrapper.element).toMatchSnapshot(); - // }); - }); }); diff --git a/src/image-viewer/demos/background.vue b/src/image-viewer/demos/background.vue deleted file mode 100644 index 1acd356dd..000000000 --- a/src/image-viewer/demos/background.vue +++ /dev/null @@ -1,35 +0,0 @@ - - diff --git a/src/image-viewer/demos/base.vue b/src/image-viewer/demos/base.vue index d0e0c82c3..703669405 100644 --- a/src/image-viewer/demos/base.vue +++ b/src/image-viewer/demos/base.vue @@ -1,27 +1,14 @@ + - diff --git a/src/image-viewer/demos/closeBtn.vue b/src/image-viewer/demos/closeBtn.vue deleted file mode 100644 index 3c5f84d60..000000000 --- a/src/image-viewer/demos/closeBtn.vue +++ /dev/null @@ -1,28 +0,0 @@ - - - diff --git a/src/image-viewer/demos/closeEvent.vue b/src/image-viewer/demos/closeEvent.vue deleted file mode 100644 index 191d642fa..000000000 --- a/src/image-viewer/demos/closeEvent.vue +++ /dev/null @@ -1,32 +0,0 @@ - - - diff --git a/src/image-viewer/demos/imageList.vue b/src/image-viewer/demos/imageList.vue deleted file mode 100644 index f06f196b2..000000000 --- a/src/image-viewer/demos/imageList.vue +++ /dev/null @@ -1,43 +0,0 @@ - - diff --git a/src/image-viewer/demos/initialIndex.vue b/src/image-viewer/demos/initialIndex.vue deleted file mode 100644 index 8fb417196..000000000 --- a/src/image-viewer/demos/initialIndex.vue +++ /dev/null @@ -1,32 +0,0 @@ - - diff --git a/src/image-viewer/demos/mobile.vue b/src/image-viewer/demos/mobile.vue index 8880ea124..7ca24ab89 100644 --- a/src/image-viewer/demos/mobile.vue +++ b/src/image-viewer/demos/mobile.vue @@ -2,15 +2,22 @@

ImageViewer 图片预览

图片全屏放大预览效果，包含全屏背景色、页码位置样式、增加操作等规范

- + - - + + +
+ + diff --git a/src/image-viewer/demos/operation.vue b/src/image-viewer/demos/operation.vue new file mode 100644 index 000000000..9480b9a62 --- /dev/null +++ b/src/image-viewer/demos/operation.vue @@ -0,0 +1,14 @@ + + + diff --git a/src/image-viewer/image-viewer.en-US.md b/src/image-viewer/image-viewer.en-US.md new file mode 100644 index 000000000..03fc1260a --- /dev/null +++ b/src/image-viewer/image-viewer.en-US.md @@ -0,0 +1,26 @@ +:: BASE_DOC :: + +## API +### ImageViewer Props + +name | type | default | description | required +-- | -- | -- | -- | -- +closeBtn | Boolean / Slot / Function | true | Typescript：`boolean \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N +deleteBtn | Boolean / Slot / Function | false | Typescript：`boolean \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N +images | Array | [] | Typescript：`Array` | N +index | Number | - | `v-model:index` is supported | N +defaultIndex | Number | - | uncontrolled property | N +maxZoom | Number | 3 | Typescript：`Number` | N +showIndex | Boolean | false | \- | N +visible | Boolean | false | `v-model` and `v-model:visible` is supported | N +onClose | Function | | Typescript：`(context: { trigger: 'overlay' \| 'close-btn', visible: Boolean, index: Number }) => void`
| N +onDelete | Function | | Typescript：`(index: Number) => void`
| N +onIndexChange | Function | | Typescript：`(index: number, context: { trigger: 'prev' \| 'next' }) => void`
| N + +### ImageViewer Events + +name | params | description +-- | -- | -- +close | `(context: { trigger: 'overlay' \| 'close-btn', visible: Boolean, index: Number })` | \- +delete | `(index: Number)` | \- +index-change | `(index: number, context: { trigger: 'prev' \| 'next' })` | \- diff --git a/src/image-viewer/image-viewer.md b/src/image-viewer/image-viewer.md index 59f4b1bae..56dda94c5 100644 --- a/src/image-viewer/image-viewer.md +++ b/src/image-viewer/image-viewer.md @@ -5,19 +5,22 @@ 名称 | 类型 | 默认值 | 说明 | 必传 -- | -- | -- | -- | -- -closeBtn | Boolean / Slot / Function | true | 是否展示关闭按钮，值为 `true` 显示默认关闭按钮；值为 `false` 则不显示关闭按钮；也可以完全自定义关闭按钮。TS 类型：`boolean | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N +closeBtn | Boolean / Slot / Function | true | 是否展示关闭按钮，值为 `true` 显示默认关闭按钮；值为 `false` 则不显示关闭按钮；也可以完全自定义关闭按钮。TS 类型：`boolean \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N +deleteBtn | Boolean / Slot / Function | false | 是否显示删除操作，前提需要开启页码。TS 类型：`boolean \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N images | Array | [] | 图片数组。TS 类型：`Array` | N -initialIndex | Number | 0 | 初始化页码。TS 类型：`Number` | N -maxZoom | Number | 3 | 最大放大比例。TS 类型：`Number` | N +index | Number | - | 当前预览图片所在的下标。支持语法糖 `v-model:index` | N +defaultIndex | Number | - | 当前预览图片所在的下标。非受控属性 | N +maxZoom | Number | 3 | 【开发中】最大放大比例。TS 类型：`Number` | N showIndex | Boolean | false | 是否显示页码 | N visible | Boolean | false | 隐藏/显示预览。支持语法糖 `v-model` 或 `v-model:visible` | N -defaultVisible | Boolean | false | 隐藏/显示预览。非受控属性 | N -onClose | Function | | TS 类型：`(context: { trigger: 'close-btn' | 'overlay' | 'esc'; e: MouseEvent | KeyboardEvent }) => void`
关闭时触发，事件参数包含触发关闭的来源：关闭按钮、遮罩层、ESC 键 | N -onIndexChange | Function | | TS 类型：`(index: number, context: { trigger: 'prev' | 'next' }) => void`
预览图片切换时触发，`context.prev` 切换到上一张图片，`context.next` 切换到下一张图片 | N +onClose | Function | | TS 类型：`(context: { trigger: 'overlay' \| 'close-btn', visible: Boolean, index: Number }) => void`
关闭时触发 | N +onDelete | Function | | TS 类型：`(index: Number) => void`
点击删除操作按钮时触发 | N +onIndexChange | Function | | TS 类型：`(index: number, context: { trigger: 'prev' \| 'next' }) => void`
预览图片切换时触发，`context.prev` 切换到上一张图片，`context.next` 切换到下一张图片 | N ### ImageViewer Events 名称 | 参数 | 描述 -- | -- | -- -close | `(context: { trigger: 'close-btn' | 'overlay' | 'esc'; e: MouseEvent | KeyboardEvent })` | 关闭时触发，事件参数包含触发关闭的来源：关闭按钮、遮罩层、ESC 键 -index-change | `(index: number, context: { trigger: 'prev' | 'next' })` | 预览图片切换时触发，`context.prev` 切换到上一张图片，`context.next` 切换到下一张图片 +close | `(context: { trigger: 'overlay' \| 'close-btn', visible: Boolean, index: Number })` | 关闭时触发 +delete | `(index: Number)` | 点击删除操作按钮时触发 +index-change | `(index: number, context: { trigger: 'prev' \| 'next' })` | 预览图片切换时触发，`context.prev` 切换到上一张图片，`context.next` 切换到下一张图片 diff --git a/src/image-viewer/image-viewer.vue b/src/image-viewer/image-viewer.vue index 7d642f0a6..3bf153485 100644 --- a/src/image-viewer/image-viewer.vue +++ b/src/image-viewer/image-viewer.vue @@ -1,91 +1,91 @@