Skip to content

Commit 4873685

Browse files
EthanShen10086github-actions[bot]Wesley-0808uyarntdesign-bot
authored
feat(ImageViewer): add default trigger and simplify demos (#5935)
* feat: 添加默认的trigger代码 * feat: 根据CR修复defaultTrigger逻辑以及根据CR修复BEM错误的class命名 * feat: renderDefaultTrigger使用t-image方案 * chore: update snapshot * chore: update common * chore: optimize * chore: update snapshot * chore: update common * chore: update demo * chore: simplify demo * chore: optimize docs * chore: stash changelog [ci skip] --------- Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: Wesley <[email protected]> Co-authored-by: Uyarn <[email protected]> Co-authored-by: tdesign-bot <[email protected]>
1 parent 13db4a1 commit 4873685

File tree

10 files changed

+303
-336
lines changed

10 files changed

+303
-336
lines changed

‎packages/components/image-viewer/_example-ts/base.vue‎

Lines changed: 2 additions & 81 deletions
Original file line numberDiff line numberDiff line change
@@ -1,91 +1,12 @@
11
<template>
2-
<div>
3-
<div class="tdesign-demo-image-viewer__base">
4-
<t-image-viewer :images="[img]">
5-
<template #trigger="{ open }">
6-
<div class="tdesign-demo-image-viewer__ui-image">
7-
<img alt="test" :src="img" class="tdesign-demo-image-viewer__ui-image--img" />
8-
<div class="tdesign-demo-image-viewer__ui-image--hover" @click="open">
9-
<span><BrowseIcon size="1.4em" /> 预览</span>
10-
</div>
11-
</div>
12-
</template>
13-
</t-image-viewer>
14-
</div>
2+
<div class="tdesign-demo-image-viewer__base">
3+
<t-image-viewer :images="[img]"></t-image-viewer>
154
</div>
165
</template>
176
<script lang="ts" setup>
18-
import { BrowseIcon } from 'tdesign-icons-vue-next';
197
const img = 'https://tdesign.gtimg.com/demo/demo-image-1.png';
208
</script>
219
<style scoped>
22-
.tdesign-demo-image-viewer__ui-image {
23-
width: 100%;
24-
height: 100%;
25-
display: inline-flex;
26-
position: relative;
27-
justify-content: center;
28-
align-items: center;
29-
border-radius: var(--td-radius-small);
30-
overflow: hidden;
31-
}
32-
33-
.tdesign-demo-image-viewer__ui-image--hover {
34-
width: 100%;
35-
height: 100%;
36-
display: flex;
37-
justify-content: center;
38-
align-items: center;
39-
position: absolute;
40-
left: 0;
41-
top: 0;
42-
opacity: 0;
43-
background-color: rgba(0, 0, 0, 0.6);
44-
color: var(--td-text-color-anti);
45-
line-height: 22px;
46-
transition: 0.2s;
47-
}
48-
49-
.tdesign-demo-image-viewer__ui-image:hover .tdesign-demo-image-viewer__ui-image--hover {
50-
opacity: 1;
51-
cursor: pointer;
52-
}
53-
54-
.tdesign-demo-image-viewer__ui-image--img {
55-
width: auto;
56-
height: auto;
57-
max-width: 100%;
58-
max-height: 100%;
59-
cursor: pointer;
60-
position: absolute;
61-
}
62-
63-
.tdesign-demo-image-viewer__ui-image--footer {
64-
padding: 0 16px;
65-
height: 56px;
66-
width: 100%;
67-
line-height: 56px;
68-
font-size: 16px;
69-
position: absolute;
70-
bottom: 0;
71-
color: var(--td-text-color-anti);
72-
background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 100%);
73-
display: flex;
74-
box-sizing: border-box;
75-
}
76-
77-
.tdesign-demo-image-viewer__ui-image--title {
78-
flex: 1;
79-
}
80-
81-
.tdesign-demo-popup__reference {
82-
margin-left: 16px;
83-
}
84-
85-
.tdesign-demo-image-viewer__ui-image--icons .tdesign-demo-icon {
86-
cursor: pointer;
87-
}
88-
8910
.tdesign-demo-image-viewer__base {
9011
width: 160px;
9112
height: 160px;

‎packages/components/image-viewer/_example-ts/modeless.vue‎

Lines changed: 1 addition & 81 deletions
Original file line numberDiff line numberDiff line change
@@ -1,94 +1,14 @@
11
<template>
22
<div class="tdesign-demo-image-viewer__base">
3-
<t-image-viewer v-model:visible="visible" draggable mode="modeless" :images="[img]">
4-
<template #trigger>
5-
<div class="tdesign-demo-image-viewer__ui-image">
6-
<img alt="test" :src="img" class="tdesign-demo-image-viewer__ui-image--img" />
7-
<div class="tdesign-demo-image-viewer__ui-image--hover" @click="onOpen">
8-
<span><BrowseIcon size="1.4em" /> 预览</span>
9-
</div>
10-
</div>
11-
</template>
12-
</t-image-viewer>
3+
<t-image-viewer draggable mode="modeless" :images="[img]"> </t-image-viewer>
134
</div>
145
</template>
156

167
<script lang="ts" setup>
17-
import { ref } from 'vue';
18-
import { BrowseIcon } from 'tdesign-icons-vue-next';
198
const img = 'https://tdesign.gtimg.com/demo/demo-image-1.png';
20-
const visible = ref(false);
21-
const onOpen = () => (visible.value = true);
229
</script>
2310

2411
<style scoped>
25-
.tdesign-demo-image-viewer__ui-image {
26-
width: 100%;
27-
height: 100%;
28-
display: inline-flex;
29-
position: relative;
30-
justify-content: center;
31-
align-items: center;
32-
border-radius: var(--td-radius-small);
33-
overflow: hidden;
34-
}
35-
36-
.tdesign-demo-image-viewer__ui-image--hover {
37-
width: 100%;
38-
height: 100%;
39-
display: flex;
40-
justify-content: center;
41-
align-items: center;
42-
position: absolute;
43-
left: 0;
44-
top: 0;
45-
opacity: 0;
46-
background-color: rgba(0, 0, 0, 0.6);
47-
color: var(--td-text-color-anti);
48-
line-height: 22px;
49-
transition: 0.2s;
50-
}
51-
52-
.tdesign-demo-image-viewer__ui-image:hover .tdesign-demo-image-viewer__ui-image--hover {
53-
opacity: 1;
54-
cursor: pointer;
55-
}
56-
57-
.tdesign-demo-image-viewer__ui-image--img {
58-
width: auto;
59-
height: auto;
60-
max-width: 100%;
61-
max-height: 100%;
62-
cursor: pointer;
63-
position: absolute;
64-
}
65-
66-
.tdesign-demo-image-viewer__ui-image--footer {
67-
padding: 0 16px;
68-
height: 56px;
69-
width: 100%;
70-
line-height: 56px;
71-
font-size: 16px;
72-
position: absolute;
73-
bottom: 0;
74-
color: var(--td-text-color-anti);
75-
background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 100%);
76-
display: flex;
77-
box-sizing: border-box;
78-
}
79-
80-
.tdesign-demo-image-viewer__ui-image--title {
81-
flex: 1;
82-
}
83-
84-
.tdesign-demo-popup__reference {
85-
margin-left: 16px;
86-
}
87-
88-
.tdesign-demo-image-viewer__ui-image--icons .tdesign-demo-icon {
89-
cursor: pointer;
90-
}
91-
9212
.tdesign-demo-image-viewer__base {
9313
width: 160px;
9414
height: 160px;

‎packages/components/image-viewer/_example/base.vue‎

Lines changed: 2 additions & 82 deletions
Original file line numberDiff line numberDiff line change
@@ -1,92 +1,12 @@
11
<template>
2-
<div>
3-
<div class="tdesign-demo-image-viewer__base">
4-
<t-image-viewer :images="[img]">
5-
<template #trigger="{ open }">
6-
<div class="tdesign-demo-image-viewer__ui-image">
7-
<img alt="test" :src="img" class="tdesign-demo-image-viewer__ui-image--img" />
8-
<div class="tdesign-demo-image-viewer__ui-image--hover" @click="open">
9-
<span><BrowseIcon size="1.4em" /> 预览</span>
10-
</div>
11-
</div>
12-
</template>
13-
</t-image-viewer>
14-
</div>
2+
<div class="tdesign-demo-image-viewer__base">
3+
<t-image-viewer :images="[img]"></t-image-viewer>
154
</div>
165
</template>
176
<script setup>
18-
import { BrowseIcon } from 'tdesign-icons-vue-next';
19-
207
const img = 'https://tdesign.gtimg.com/demo/demo-image-1.png';
218
</script>
229
<style scoped>
23-
.tdesign-demo-image-viewer__ui-image {
24-
width: 100%;
25-
height: 100%;
26-
display: inline-flex;
27-
position: relative;
28-
justify-content: center;
29-
align-items: center;
30-
border-radius: var(--td-radius-small);
31-
overflow: hidden;
32-
}
33-
34-
.tdesign-demo-image-viewer__ui-image--hover {
35-
width: 100%;
36-
height: 100%;
37-
display: flex;
38-
justify-content: center;
39-
align-items: center;
40-
position: absolute;
41-
left: 0;
42-
top: 0;
43-
opacity: 0;
44-
background-color: rgba(0, 0, 0, 0.6);
45-
color: var(--td-text-color-anti);
46-
line-height: 22px;
47-
transition: 0.2s;
48-
}
49-
50-
.tdesign-demo-image-viewer__ui-image:hover .tdesign-demo-image-viewer__ui-image--hover {
51-
opacity: 1;
52-
cursor: pointer;
53-
}
54-
55-
.tdesign-demo-image-viewer__ui-image--img {
56-
width: auto;
57-
height: auto;
58-
max-width: 100%;
59-
max-height: 100%;
60-
cursor: pointer;
61-
position: absolute;
62-
}
63-
64-
.tdesign-demo-image-viewer__ui-image--footer {
65-
padding: 0 16px;
66-
height: 56px;
67-
width: 100%;
68-
line-height: 56px;
69-
font-size: 16px;
70-
position: absolute;
71-
bottom: 0;
72-
color: var(--td-text-color-anti);
73-
background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 100%);
74-
display: flex;
75-
box-sizing: border-box;
76-
}
77-
78-
.tdesign-demo-image-viewer__ui-image--title {
79-
flex: 1;
80-
}
81-
82-
.tdesign-demo-popup__reference {
83-
margin-left: 16px;
84-
}
85-
86-
.tdesign-demo-image-viewer__ui-image--icons .tdesign-demo-icon {
87-
cursor: pointer;
88-
}
89-
9010
.tdesign-demo-image-viewer__base {
9111
width: 160px;
9212
height: 160px;

‎packages/components/image-viewer/_example/modeless.vue‎

Lines changed: 1 addition & 83 deletions
Original file line numberDiff line numberDiff line change
@@ -1,96 +1,14 @@
11
<template>
22
<div class="tdesign-demo-image-viewer__base">
3-
<t-image-viewer v-model:visible="visible" draggable mode="modeless" :images="[img]">
4-
<template #trigger>
5-
<div class="tdesign-demo-image-viewer__ui-image">
6-
<img alt="test" :src="img" class="tdesign-demo-image-viewer__ui-image--img" />
7-
<div class="tdesign-demo-image-viewer__ui-image--hover" @click="onOpen">
8-
<span><BrowseIcon size="1.4em" /> 预览</span>
9-
</div>
10-
</div>
11-
</template>
12-
</t-image-viewer>
3+
<t-image-viewer draggable mode="modeless" :images="[img]"> </t-image-viewer>
134
</div>
145
</template>
156

167
<script setup>
17-
import { ref } from 'vue';
18-
import { BrowseIcon } from 'tdesign-icons-vue-next';
19-
208
const img = 'https://tdesign.gtimg.com/demo/demo-image-1.png';
21-
22-
const visible = ref(false);
23-
const onOpen = () => (visible.value = true);
249
</script>
2510

2611
<style scoped>
27-
.tdesign-demo-image-viewer__ui-image {
28-
width: 100%;
29-
height: 100%;
30-
display: inline-flex;
31-
position: relative;
32-
justify-content: center;
33-
align-items: center;
34-
border-radius: var(--td-radius-small);
35-
overflow: hidden;
36-
}
37-
38-
.tdesign-demo-image-viewer__ui-image--hover {
39-
width: 100%;
40-
height: 100%;
41-
display: flex;
42-
justify-content: center;
43-
align-items: center;
44-
position: absolute;
45-
left: 0;
46-
top: 0;
47-
opacity: 0;
48-
background-color: rgba(0, 0, 0, 0.6);
49-
color: var(--td-text-color-anti);
50-
line-height: 22px;
51-
transition: 0.2s;
52-
}
53-
54-
.tdesign-demo-image-viewer__ui-image:hover .tdesign-demo-image-viewer__ui-image--hover {
55-
opacity: 1;
56-
cursor: pointer;
57-
}
58-
59-
.tdesign-demo-image-viewer__ui-image--img {
60-
width: auto;
61-
height: auto;
62-
max-width: 100%;
63-
max-height: 100%;
64-
cursor: pointer;
65-
position: absolute;
66-
}
67-
68-
.tdesign-demo-image-viewer__ui-image--footer {
69-
padding: 0 16px;
70-
height: 56px;
71-
width: 100%;
72-
line-height: 56px;
73-
font-size: 16px;
74-
position: absolute;
75-
bottom: 0;
76-
color: var(--td-text-color-anti);
77-
background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 100%);
78-
display: flex;
79-
box-sizing: border-box;
80-
}
81-
82-
.tdesign-demo-image-viewer__ui-image--title {
83-
flex: 1;
84-
}
85-
86-
.tdesign-demo-popup__reference {
87-
margin-left: 16px;
88-
}
89-
90-
.tdesign-demo-image-viewer__ui-image--icons .tdesign-demo-icon {
91-
cursor: pointer;
92-
}
93-
9412
.tdesign-demo-image-viewer__base {
9513
width: 160px;
9614
height: 160px;

‎packages/components/image-viewer/image-viewer.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ mode | String | modal | 模态预览（modal）和非模态预览（modeless)。
2020
navigationArrow | Boolean / Slot / Function | true | 切换预览图片的左图标，可自定义。TS 类型：`boolean \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N
2121
showOverlay | Boolean | undefined | 是否显示遮罩层。`mode=modal` 时，默认显示；`mode=modeless` 时，默认不显示 | N
2222
title | String / Slot / Function | - | 预览标题。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N
23-
trigger | String / Slot / Function | - | 触发图片预览的元素，可能是一个预览按钮，可能是一张缩略图，完全自定义。TS 类型：`TNode \| TNode<{ open: (index?: number) => void }>`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N
23+
trigger | String / Slot / Function | - | 触发图片预览的元素，可能是一个预览按钮，可能是一张缩略图，完全自定义，默认为预览图片的缩略图。TS 类型：`TNode \| TNode<{ open: (index?: number) => void }>`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N
2424
viewerScale | Object | - | 限制预览器缩放的最小宽度和最小高度，仅 `mode=modeless` 时有效。TS 类型：`ImageViewerScale` `interface ImageViewerScale { minWidth: number; minHeight: number }`。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/image-viewer/type.ts) | N
2525
visible | Boolean | false | 隐藏/显示预览。支持语法糖 `v-model` 或 `v-model:visible` | N
2626
defaultVisible | Boolean | false | 隐藏/显示预览。非受控属性 | N

0 commit comments

Comments
 (0)