Q-View 文件预览

基础用法

Q-View 支持传入自定义按钮事件，设置高度，还支持文件翻页以及全屏显示。

注意

该组件只有代码示例，不能进行在线预览，需自己测试，其中 fileData 直接使用 后端 response.data.list 即可 。

<template>
  <QView :fileList="fileData" :height="500" :buttons="buttons" :urlFile="urlFile">
    <template v-for="(button, index) in buttons" v-slot:[`button${index}`]="slotProps">
      <el-button size="small" @click="slotProps.action" :type="button.type">{{
        button.label
        }}
      </el-button>
    </template>
  </QView>
</template>
<script>
  export default {
    data() {
      return {
        urlFile: '', //process.env.VUE_APP_FILE_URL
        buttons: [
          {label: 'xxx', action: this.openFileUpload, type: 'primary'},
        ],
        fileData: [] //response.data.list 
      }
    },
    methods: {
      openFileUpload() {

      }
    }
  }
</script>

Expand Copy Copy

Attributes

fileList包含属性 fileName和path

属性名	说明	类型	可选值	默认值
fileList	文件数据	Array	—	—
urlFile	文件路径	Array	process.env.VUE_APP_FILE_URL	必填
watermark	水印文本	String	—	—
buttons	自定义按钮	Array	—	—
height	卡片高度	Number	—	300
iframeHeight	iframe高度	String	—	—
skeletonHeight	骨架高度	String	—	400px
imageStyle	骨架图片样式	Object	—	—

Slots

属性名	说明
skeleton	无数据时候插槽