element-plus图片预览组件el-image-viewer组件，自定义初始索引和ts类型

el-image-viewer组件在官网没有说明，相关的api和官网的image组件类似

用法如下：

<ElImageViewer 
    :initial-index="viewerIndex" 
    @close="closePictureViewer" 
    :url-list="previewImageList" 
    v-if="showPictureViewer" 
/>

 ：url-list需要的类型是string[]

// 照片墙预览viewer地址列表
const previewImageList = ref<string[]>();
// 控制预览显示与隐藏
const showPictureViewer = ref<boolean>(false);
// 初始预览图像索引
const viewerIndex = ref<number>(0)

以下根据自己业务场景变化 

// 图片预览事件
const pictureCardPreview = (file: any) => {
    // findIndex获取点击图片在数组的初始位置决定预览图片的索引
    viewerIndex.value = imageList.value.findIndex(item => item.name === file.name)
    // image-viewer的图片地址ts类型必须是string[]
    previewImageList.value = imageList.value.map<string>(item => {
        return item.url as string
    })
    // 开启预览
    showPictureViewer.value = true;
}

// 点击隐藏图片预览
const closePictureViewer = () => showPictureViewer.value = false;

成功实现。