vue3 + ts 封装图片预览、旋转、上一张、下一张功能

图片数据格式

images：[

image1,

image2,

image3,

......

]

在elementpluselement plus中提供的预览功能为一个弹窗并声明一个变量dialogImageUrl使用el-image显示或者是使用官方提供的previewSrcList进行预览功能

今天封装的主要功能包括 图片在父级页面的展示 以及打开一个弹窗后进行的旋转 图片切换功能

引用页面展示

弹窗部分展示

话不多说上代码 

 ts部分

上一张与下一张逻辑类似 每次都需要我们进行循环原始图片数组然后对展示的图片进行赋值

在上面的代码中我们进行了v-if="index == dialogImageIndex" 这样的一个判断 如果他们的索引相等则进行展示 所以在这里我们也要对dialogImageIndex进行重新赋值因为原始的图片数组与展示的数据时同一个所以这里的索引值不需要进行-1处理

 最后如果你想保留旋转数值那么你的数据结构就要进行改变大致是下面这样

const imageList:any = ref<Array<any>>([

    {

        image1:你的图片地址,

        transform:0,

    }

])

 然后每次旋转之后将你的旋转值赋给当前图片的transform里 transform类型为number

本人纯小白 不喜勿喷  有不对的请多多指教

最后祝大家（重要的事情说三遍）

永无bug

永无bug

永无bug