Media View 媒体展示查看器

用于查看媒体文件（图片）。

注意

pa-media-view 可独立使用，在 pa-form/pa-table 中可使用时，需配置 prop 字段。

组件功能展示

基础使用

单文件使用

text.txt

下载

<template>
  <pa-title :padding="['bottom']">基础使用</pa-title>
  <pa-media-view :file-list="value1"></pa-media-view>

  <pa-title :padding="['bottom']">单文件使用</pa-title>
  <pa-media-view-item :filePath="file.filePath" :fileName="file.fileName" :file="file"></pa-media-view-item>
</template>

<script lang="ts" setup>
import { ref } from "vue";
const value1 = ref([
  {
    fileId: "0000005",
    fileName: "text.txt",
    filePath: "//manager.frontend-m.online/test-file/text.txt"
  },
  {
    fileId: "0000004",
    fileName: "pdf.pdf",
    filePath: "http://manager.frontend-m.online/test-file/pdf.pdf"
  },
  {
    fileId: "0000003",
    fileName: "excel.xlsx",
    filePath: "//manager.frontend-m.online/test-file/excel.xlsx"
  },
  {
    fileId: "0000002",
    fileName: "doc.docx",
    filePath: "//manager.frontend-m.online/test-file/doc.docx"
  },
  {
    fileId: "0000001",
    fileName: "img.png",
    filePath: "//manager.frontend-m.online/test-file/img.jpeg"
  }
]);
// http://view.officeapps.live.com/op/view.aspx?src=//manager.frontend-m.online/test-file/doc.docx
const file = value1.value[0];
</script>

<style></style>

显示代码

SaMediaViewType

字段	描述	类型	默认值
fileList	绑定值	Array<SaMediaViewItemType>
hideBtn	是否显示开启按钮	boolean	false

SaMediaViewItemType

字段	描述	类型	默认值
FileId	文件 ID	string
FullPath	完整路径	string number
FileName	文件名	boolean
FileUrl	文件相对路径	boolean
OriginalName	相对文件名	boolean