使用背景

显示列表点击图片可以获取当行的数据有(后缀名 路径)

1.实现代码

1 <img v-if="data.fileShow.fileType == 0" :src="data.fileShow.fileUrl">
2             <!-- <audio v-if="data.fileShow.fileType == 1" :src="data.fileShow.fileUrl" controls class="m-1"></audio> -->
3             <video v-if="data.fileShow.fileType == 1" :src="data.fileShow.fileUrl" controls class="w-full m-1"></video>
4             <embed v-if="data.fileShow.fileType == 2" :src="data.fileShow.fileUrl" type="text/plain" width="100%"
5                 height="500px" />
<iframe v-if="data.fileShow.fileType == 3" allowtransparency="true" frameborder="0" scrolling="no"
                class="w-full h-full" :src="data.fileShow.fileUrl"></iframe>

注意   img:可以显示图片   video :可以显示音频视频    embed:显示txt文件     iframe :可以显示office文件但那是加工过的 不可以直接使用    data.fileShow.fileUrl:是文件的相对路径  data.fileShow.fileType:只是判断显示隐藏的标识

最后用一个弹框组件显示  这样效果更佳