提交 19d8e01e 作者: 无木

feat(table-img): support simple show mode and more props

改进TableImg组件,支持简单显示模式以及更多可配置的属性。
上级 50f94bfe
<template> <template>
<div <div
:class="prefixCls" :class="prefixCls"
class="flex mx-auto items-center" class="flex items-center mx-auto"
v-if="imgList && imgList.length" v-if="imgList && imgList.length"
:style="getWrapStyle" :style="getWrapStyle"
> >
<PreviewGroup> <Badge :count="!showBadge || imgList.length == 1 ? 0 : imgList.length" v-if="simpleShow">
<template v-for="img in imgList" :key="img"> <div class="img-div">
<Image :width="size" :src="img" /> <PreviewGroup>
<template v-for="(img, index) in imgList" :key="img">
<Image
:width="size"
:style="{
display: index === 0 ? '' : 'none !important',
}"
:src="srcPrefix + img"
/>
</template>
</PreviewGroup>
</div>
</Badge>
<PreviewGroup v-else>
<template v-for="(img, index) in imgList" :key="img">
<Image
:width="size"
:style="{ 'margin-left': index === 0 ? 0 : margin }"
:src="srcPrefix + img"
/>
</template> </template>
</PreviewGroup> </PreviewGroup>
</div> </div>
...@@ -17,24 +36,30 @@ ...@@ -17,24 +36,30 @@
import { defineComponent, computed } from 'vue'; import { defineComponent, computed } from 'vue';
import { useDesign } from '/@/hooks/web/useDesign'; import { useDesign } from '/@/hooks/web/useDesign';
import { Image } from 'ant-design-vue'; import { Image, Badge } from 'ant-design-vue';
import { propTypes } from '/@/utils/propTypes'; import { propTypes } from '/@/utils/propTypes';
export default defineComponent({ export default defineComponent({
name: 'TableImage', name: 'TableImage',
components: { Image, PreviewGroup: Image.PreviewGroup }, components: { Image, PreviewGroup: Image.PreviewGroup, Badge },
props: { props: {
imgList: propTypes.arrayOf(propTypes.string), imgList: propTypes.arrayOf(propTypes.string),
size: propTypes.number.def(40), size: propTypes.number.def(40),
// 是否简单显示(只显示第一张图片)
simpleShow: propTypes.bool,
// 简单模式下是否显示图片数量的badge
showBadge: propTypes.bool.def(true),
// 图片间距
margin: propTypes.number.def(4),
// src前缀,将会附加在imgList中每一项之前
srcPrefix: propTypes.string.def(''),
}, },
setup(props) { setup(props) {
const getWrapStyle = computed( const getWrapStyle = computed((): CSSProperties => {
(): CSSProperties => { const { size } = props;
const { size } = props; const s = `${size}px`;
const s = `${size}px`; return { height: s, width: s };
return { height: s, width: s }; });
}
);
const { prefixCls } = useDesign('basic-table-img'); const { prefixCls } = useDesign('basic-table-img');
return { prefixCls, getWrapStyle }; return { prefixCls, getWrapStyle };
...@@ -53,5 +78,9 @@ ...@@ -53,5 +78,9 @@
border-radius: 2px; border-radius: 2px;
} }
} }
.img-div {
display: inline-grid;
}
} }
</style> </style>
...@@ -7,9 +7,31 @@ ...@@ -7,9 +7,31 @@
{{ record.no }} {{ record.no }}
</Tag> </Tag>
</template> </template>
<template #avatar="{ record }">
<Avatar
:size="60"
:src="'http://api.btstu.cn/sjtx/api.php?lx=c1&format=images&id=' + record.id"
/>
</template>
<template #img> <template #img>
<TableImg <TableImg
:imgList="['https://picsum.photos/id/66/346/216', 'https://picsum.photos/id/67/346/216']" :size="60"
:simpleShow="true"
:imgList="[
'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png?1622962250222',
'https://picsum.photos/id/66/346/216',
'https://picsum.photos/id/67/346/216',
]"
/>
</template>
<template #imgs>
<TableImg
:size="60"
:imgList="[
'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png?1622962250222',
'https://picsum.photos/id/66/346/216',
'https://picsum.photos/id/67/346/216',
]"
/> />
</template> </template>
...@@ -24,7 +46,7 @@ ...@@ -24,7 +46,7 @@
<script lang="ts"> <script lang="ts">
import { defineComponent } from 'vue'; import { defineComponent } from 'vue';
import { BasicTable, useTable, BasicColumn, TableImg } from '/@/components/Table'; import { BasicTable, useTable, BasicColumn, TableImg } from '/@/components/Table';
import { Tag } from 'ant-design-vue'; import { Tag, Avatar } from 'ant-design-vue';
import { demoListApi } from '/@/api/demo/table'; import { demoListApi } from '/@/api/demo/table';
const columns: BasicColumn[] = [ const columns: BasicColumn[] = [
{ {
...@@ -33,6 +55,12 @@ ...@@ -33,6 +55,12 @@
slots: { customRender: 'id' }, slots: { customRender: 'id' },
}, },
{ {
title: '头像',
dataIndex: 'avatar',
width: 100,
slots: { customRender: 'avatar' },
},
{
title: '分类', title: '分类',
dataIndex: 'category', dataIndex: 'category',
width: 80, width: 80,
...@@ -46,12 +74,19 @@ ...@@ -46,12 +74,19 @@
width: 120, width: 120,
}, },
{ {
title: '头像', title: '图片列表1',
dataIndex: 'img', dataIndex: 'img',
width: 120, helpMessage: ['这是简单模式的图片列表', '只会显示一张在表格中', '但点击可预览多张图片'],
width: 140,
slots: { customRender: 'img' }, slots: { customRender: 'img' },
}, },
{ {
title: '照片列表2',
dataIndex: 'imgs',
width: 160,
slots: { customRender: 'imgs' },
},
{
title: '地址', title: '地址',
dataIndex: 'address', dataIndex: 'address',
}, },
...@@ -70,7 +105,7 @@ ...@@ -70,7 +105,7 @@
}, },
]; ];
export default defineComponent({ export default defineComponent({
components: { BasicTable, TableImg, Tag }, components: { BasicTable, TableImg, Tag, Avatar },
setup() { setup() {
const [registerTable] = useTable({ const [registerTable] = useTable({
title: '自定义列内容', title: '自定义列内容',
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论