基于Ant Design of Vue的粗糙组件封装-图片预览

需求

图片列表显示，并且能够点击图片跳出预览模式，并且能够直接切换查看。

分析

1. 列表形式的展示图片，可以使用antd Vue的List列表组件和Card卡片
2. 图片的点击预览可以使用第三方的图片预览组件viewerjs

组件完整代码

/**
* @description GImagePreview.vue 图片预览组件
* @author JUN - 2023/10/19 15:44
*/
<template>
    <a-list :grid="{ gutter: 16,column:columnCount}" :data-source="getAllImages">
        <a-list-item slot="renderItem" slot-scope="{fileName,filePath},index">
            <a-card hoverable
                    size="small"
                    v-show="index<maxCount||maxCount<0"
                    @click="onclick(`image_${index}`)">
                <div slot="cover" class="overflow-hidden bg-gray-100" style="height: 200px;">
                    <div class="w-full h-full imageBox">
                        <img :title="fileName" :src="filePath" :alt="fileName" :ref="`image_${index}`"/>
                    </div>
                </div>
                <a-card-meta class="text-center h-6" :title="fileName"></a-card-meta>
            </a-card>

            <a-card v-show="index===maxCount&&maxCount>-1"
                    hoverable
                    size="small"
                    @click="onclick(`image_${index}`)">
                <div slot="cover" class="overflow-hidden bg-gray-100 text-3xl font-medium" style="height: 200px;">
                    <div class="text-center" style="margin: 40% 0;">
                        <a-icon type="plus"></a-icon>
                        {{ allImages.length - maxCount }}
                    </div>
                </div>
                <a-card-meta class="text-center h-6" title="查看更多"></a-card-meta>
            </a-card>
        </a-list-item>
    </a-list>
</template>

<script lang="ts">
import {
    Vue, Component, Prop, Watch,
} from 'vue-property-decorator';
import $ from 'jquery';
import 'imageviewer/dist/viewer.js';
import 'imageviewer/dist/viewer.css';

/* 被预览的image的数据type */
export type imagePreviewItem = {
    fileName: string;
    filePath: string;
}

@Component({
    name: 'GImagePreview',
})
export default class GImagePreview extends Vue {
    /* 需要展示的图片集合 */
    @Prop({
        type: Array,
        default: () => ([]),
    }) images: imagePreviewItem[] | undefined;

    /* 最多显示的图片数量 */
    @Prop({
        type: Number,
        default: 6,
    }) maxCount: number | undefined;

    /* 是否是本地文件（要对图片路径进行处理） */
    @Prop({
        type: Boolean,
        default: false,
    }) isLocal: boolean | undefined;

    /* 源文件位置（对图片路径进行处理时使用） */
    @Prop({
        type: String,
        default: '',
    }) fileResourceUrl: string | undefined;

    /* 是否显示每个文件名称 */
    @Prop({
        type: Boolean,
        default: false,
    }) isShowFileName: boolean | undefined;

    /* 一行展示多少图片 */
    @Prop({
        type: Number,
        default: 3,
    }) columnCount: number | undefined;

    allImages: any = [];

    /**
     * @description 点击card触发的事件回调（间接利用trigger触发需要预览的image的click事件）
     * @param refName image的ref
     * @return void
     * @author JUN - 2023/10/19 15:37
     */
    onclick(refName) {
        const image_ref = this.$refs[refName];
        if (image_ref) {
            $(image_ref)
                .trigger('click');
        }
    }

    /**
     * @description 格式化一下image的路径
     * @return void
     * @author JUN - 2023/10/19 15:39
     */
    get getAllImages() {
        if (this.isLocal) {
            this.allImages = (this.images || []).map((item) => {
                let { filePath } = item;
                filePath = `${process.env.VUE_APP_API_URL}/images/${filePath}`;
                return {
                    ...item,
                    filePath,
                };
            });
        } else if (this.fileResourceUrl) {
            this.allImages = (this.images || []).map((item) => {
                let { filePath } = item;
                filePath = `${this.fileResourceUrl}${filePath}`;
                return {
                    ...item,
                    filePath,
                };
            });
        } else {
            this.allImages = this.images || [];
        }
        return this.allImages;
    }

    @Watch('images', {
        deep: true,
        immediate: true,
    })
    handleImagesChange(newVal, oldVal) {
        // 这个判断其实没有用，但是为了好看就这样写（总是true）
        if (newVal !== oldVal) {
            ($(this.$el) as any).viewer('destroy');

            this.$nextTick(() => {
                ($(this.$el) as any)
                    .viewer();
            });
        }
    }
}
</script>

<style scoped lang="less">
/deep/ .ant-card-cover {
  .imageBox {
    &:hover {
      transform: scale(1.2);
      transition: all 500ms ease;
    }
  }
}
</style>

使用

使用方式

<g-image-preview :is-show-file-name="true" :images="imageList"></g-image-preview>

图片数据

let imageList=[
  {
    "fileName": "test1.jpeg",
    "filePath": "http://192.168.1.65:9006/directory/item/test1.jpeg?path=test&preview=1&key=default"
  },
  {
    "fileName": "test10.jpg",
    "filePath": "http://192.168.1.65:9006/directory/item/test10.jpg?path=test&preview=1&key=default"
  },
  {
    "fileName": "test2.jpeg",
    "filePath": "http://192.168.1.65:9006/directory/item/test2.jpeg?path=test&preview=1&key=default"
  },
  {
    "fileName": "test3.jpg",
    "filePath": "http://192.168.1.65:9006/directory/item/test3.jpg?path=test&preview=1&key=default"
  },
  {
    "fileName": "test4.jpeg",
    "filePath": "http://192.168.1.65:9006/directory/item/test4.jpeg?path=test&preview=1&key=default"
  },
  {
    "fileName": "test5.jpeg",
    "filePath": "http://192.168.1.65:9006/directory/item/test5.jpeg?path=test&preview=1&key=default"
  },
  {
    "fileName": "test6.jpeg",
    "filePath": "http://192.168.1.65:9006/directory/item/test6.jpeg?path=test&preview=1&key=default"
  },
  {
    "fileName": "test7.jpeg",
    "filePath": "http://192.168.1.65:9006/directory/item/test7.jpeg?path=test&preview=1&key=default"
  },
  {
    "fileName": "test8.jpg",
    "filePath": "http://192.168.1.65:9006/directory/item/test8.jpg?path=test&preview=1&key=default"
  },
  {
    "fileName": "test9.jpg",
    "filePath": "http://192.168.1.65:9006/directory/item/test9.jpg?path=test&preview=1&key=default"
  }
]

效果

列表展示

图片预览