DocumentUI 附件列表

说明

DocumentUI主要用于展示附件列表，支持预览、下载附件。

基本示例

基本使用

显示下载按钮

<template>
  <div>
    <div style="margin-bottom:18px">
       <suit-button  @click="open(showDownLoad)">{{showDownLoad?'关闭下载按钮':'显示下载按钮'}}</suit-button>
    </div>
    <DocumentUl
      :file-list.sync="fileList"
      :show-down-load="showDownLoad"
    ></DocumentUl>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        showDownLoad:false,
        fileList: [
          {
            id: 1,
            url: 'https://tech.suitbim.com/stec-platform-doc/img/wKhjGmKKzqGEeyrHAAAAAB777_k983.png',
            type: 'png',
            name: '附件文件名称1.png',
            downUrl:  'https://tech.suitbim.com/stec-platform-doc/doc/wKhjGmKKzqGEeyrHAAAAAB777_k983.png',
         },
         {
            id: 2,
            url: 'https://tech.suitbim.com/stec-platform-doc/img/wKhjGmJ911eEJib7AAAAANuyis0843.png',
            type: 'png',
            name: '附件文件名称2.png',
            downUrl:  'https://tech.suitbim.com/stec-platform-doc/doc/wKhjGmJ911eEJib7AAAAANuyis0843.png',
         },
        ]
      }
    },
    methods:{
      open(flag){
        this.showDownLoad = !flag
      }
    }
  }
</script>

Expand Copy Copy

参数说明

组件属性

属性	描述	类型	可选值	默认值
fileList	获取数据	Array[]	—	[]
showDownLoad	判断是否展示下载	boolean	—	false

fileList属性

属性	描述	类型	可选值	默认值
url	附件预览地址	String	—
type	附件类型	String	—
name	附件名称	String	—
downUrl	附件下载地址	String	—

组件源码参考

组件源码 (opens new window)