使用背景
显示列表点击图片可以获取当行的数据有(后缀名 路径)
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:只是判断显示隐藏的标识
最后用一个弹框组件显示 这样效果更佳