vue2-client 1.18.45 → 1.18.46
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/src/base-client/components/common/ImagePreviewModal/ImagePreviewModal.vue +227 -136
- package/src/base-client/components/common/ImagePreviewModal/demo.vue +154 -0
- package/src/base-client/components/his/XList/XList.vue +228 -149
- package/src/base-client/components/his/XQuestionnaire/XQuestionnaireItem.vue +1 -1
- package/src/base-client/components/his/XTreeRows/XTreeRows.vue +34 -40
- package/src/pages/userInfoDetailManage/uploadFilesHistory/index.vue +19 -12
- package/src/router/async/router.map.js +2 -1
|
@@ -0,0 +1,154 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div class="image-preview-demo">
|
|
3
|
+
<a-card title="ImagePreviewModal 图片预览组件示例">
|
|
4
|
+
<a-space direction="vertical" :size="24" style="width: 100%">
|
|
5
|
+
<!-- 基础用法 -->
|
|
6
|
+
<a-card title="基础用法" size="small">
|
|
7
|
+
<p class="demo-desc">点击图片或按钮打开预览模态框，支持缩放、旋转、拖拽和下载功能</p>
|
|
8
|
+
<a-space>
|
|
9
|
+
<img
|
|
10
|
+
:src="demoImages[0]"
|
|
11
|
+
alt="示例图片1"
|
|
12
|
+
class="thumbnail"
|
|
13
|
+
@click="openPreview(demoImages[0], '风景图片')"
|
|
14
|
+
/>
|
|
15
|
+
<a-button type="primary" @click="openPreview(demoImages[0], '风景图片')">
|
|
16
|
+
<a-icon type="eye" />
|
|
17
|
+
预览图片
|
|
18
|
+
</a-button>
|
|
19
|
+
</a-space>
|
|
20
|
+
</a-card>
|
|
21
|
+
|
|
22
|
+
<!-- 多图片切换 -->
|
|
23
|
+
<a-card title="多图片预览" size="small">
|
|
24
|
+
<p class="demo-desc">点击不同图片进行预览</p>
|
|
25
|
+
<a-space>
|
|
26
|
+
<img
|
|
27
|
+
v-for="(img, index) in demoImages"
|
|
28
|
+
:key="index"
|
|
29
|
+
:src="img"
|
|
30
|
+
:alt="`示例图片${index + 1}`"
|
|
31
|
+
class="thumbnail"
|
|
32
|
+
@click="openPreview(img, `示例图片${index + 1}`)"
|
|
33
|
+
/>
|
|
34
|
+
</a-space>
|
|
35
|
+
</a-card>
|
|
36
|
+
|
|
37
|
+
<!-- 功能说明 -->
|
|
38
|
+
<a-card title="功能说明" size="small">
|
|
39
|
+
<a-descriptions :column="1" bordered size="small">
|
|
40
|
+
<a-descriptions-item label="缩放">鼠标滚轮或点击工具栏 +/- 按钮，支持 10%-300% 缩放</a-descriptions-item>
|
|
41
|
+
<a-descriptions-item label="旋转">点击工具栏旋转按钮，每次旋转 90°</a-descriptions-item>
|
|
42
|
+
<a-descriptions-item label="拖拽">鼠标左键按住图片拖动</a-descriptions-item>
|
|
43
|
+
<a-descriptions-item label="下载">点击下载按钮保存图片到本地</a-descriptions-item>
|
|
44
|
+
<a-descriptions-item label="关闭">点击关闭按钮、遮罩层或按 ESC 键关闭</a-descriptions-item>
|
|
45
|
+
</a-descriptions>
|
|
46
|
+
</a-card>
|
|
47
|
+
|
|
48
|
+
<!-- API 文档 -->
|
|
49
|
+
<a-card title="API 属性" size="small">
|
|
50
|
+
<a-table :columns="apiColumns" :data-source="apiData" :pagination="false" size="small" />
|
|
51
|
+
</a-card>
|
|
52
|
+
|
|
53
|
+
<!-- 事件文档 -->
|
|
54
|
+
<a-card title="事件" size="small">
|
|
55
|
+
<a-table :columns="eventColumns" :data-source="eventData" :pagination="false" size="small" />
|
|
56
|
+
</a-card>
|
|
57
|
+
</a-space>
|
|
58
|
+
</a-card>
|
|
59
|
+
|
|
60
|
+
<!-- 图片预览组件 -->
|
|
61
|
+
<image-preview-modal
|
|
62
|
+
:visible="previewVisible"
|
|
63
|
+
:image-url="previewImage"
|
|
64
|
+
:image-name="previewImageName"
|
|
65
|
+
@close="previewVisible = false"
|
|
66
|
+
/>
|
|
67
|
+
</div>
|
|
68
|
+
</template>
|
|
69
|
+
|
|
70
|
+
<script>
|
|
71
|
+
import ImagePreviewModal from './ImagePreviewModal.vue'
|
|
72
|
+
|
|
73
|
+
export default {
|
|
74
|
+
name: 'ImagePreviewModalDemo',
|
|
75
|
+
components: {
|
|
76
|
+
ImagePreviewModal
|
|
77
|
+
},
|
|
78
|
+
data() {
|
|
79
|
+
return {
|
|
80
|
+
// 预览状态
|
|
81
|
+
previewVisible: false,
|
|
82
|
+
previewImage: '',
|
|
83
|
+
previewImageName: '',
|
|
84
|
+
// 示例图片（使用占位图服务）
|
|
85
|
+
demoImages: [
|
|
86
|
+
'https://picsum.photos/800/600?random=1',
|
|
87
|
+
'https://picsum.photos/600/800?random=2',
|
|
88
|
+
'https://picsum.photos/800/800?random=3'
|
|
89
|
+
],
|
|
90
|
+
// API 表格列
|
|
91
|
+
apiColumns: [
|
|
92
|
+
{ title: '属性', dataIndex: 'prop', width: 150 },
|
|
93
|
+
{ title: '说明', dataIndex: 'desc' },
|
|
94
|
+
{ title: '类型', dataIndex: 'type', width: 100 },
|
|
95
|
+
{ title: '默认值', dataIndex: 'default', width: 120 }
|
|
96
|
+
],
|
|
97
|
+
// API 数据
|
|
98
|
+
apiData: [
|
|
99
|
+
{ key: '1', prop: 'visible', desc: '是否显示预览模态框', type: 'Boolean', default: 'false' },
|
|
100
|
+
{ key: '2', prop: 'imageUrl', desc: '图片URL地址', type: 'String', default: "''" },
|
|
101
|
+
{
|
|
102
|
+
key: '3',
|
|
103
|
+
prop: 'imageName',
|
|
104
|
+
desc: '图片名称（用于下载时的文件名）',
|
|
105
|
+
type: 'String',
|
|
106
|
+
default: "'preview_image'"
|
|
107
|
+
}
|
|
108
|
+
],
|
|
109
|
+
// 事件表格列
|
|
110
|
+
eventColumns: [
|
|
111
|
+
{ title: '事件名', dataIndex: 'event', width: 150 },
|
|
112
|
+
{ title: '说明', dataIndex: 'desc' },
|
|
113
|
+
{ title: '回调参数', dataIndex: 'params', width: 150 }
|
|
114
|
+
],
|
|
115
|
+
// 事件数据
|
|
116
|
+
eventData: [{ key: '1', event: 'close', desc: '关闭模态框时触发', params: '-' }]
|
|
117
|
+
}
|
|
118
|
+
},
|
|
119
|
+
methods: {
|
|
120
|
+
// 打开预览
|
|
121
|
+
openPreview(url, name) {
|
|
122
|
+
this.previewImage = url
|
|
123
|
+
this.previewImageName = name
|
|
124
|
+
this.previewVisible = true
|
|
125
|
+
}
|
|
126
|
+
}
|
|
127
|
+
}
|
|
128
|
+
</script>
|
|
129
|
+
|
|
130
|
+
<style lang="less" scoped>
|
|
131
|
+
.image-preview-demo {
|
|
132
|
+
padding: 24px;
|
|
133
|
+
|
|
134
|
+
.demo-desc {
|
|
135
|
+
color: #666;
|
|
136
|
+
margin-bottom: 16px;
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
.thumbnail {
|
|
140
|
+
width: 120px;
|
|
141
|
+
height: 90px;
|
|
142
|
+
object-fit: cover;
|
|
143
|
+
border-radius: 4px;
|
|
144
|
+
cursor: pointer;
|
|
145
|
+
border: 1px solid #d9d9d9;
|
|
146
|
+
transition: all 0.3s;
|
|
147
|
+
|
|
148
|
+
&:hover {
|
|
149
|
+
border-color: #1890ff;
|
|
150
|
+
box-shadow: 0 2px 8px rgba(24, 144, 255, 0.3);
|
|
151
|
+
}
|
|
152
|
+
}
|
|
153
|
+
}
|
|
154
|
+
</style>
|