<!--author: gengchao-->
<template>
<section>
   <div style="margin-left:20px;"><h1>图片上传组件：</h1></div>
   <uploadVue style="margin:20px;" :files="files" ref="uploadPic"></uploadVue>
    
   <div class="container-fluid">
        <div class="panel panel-primary">
          <div class="panel-heading">文件上传组件使用说明</div>
          <div class="panel-body">
            <table class="table">
              <tbody>
                <tr>
                <td>组件路径</td>
                <td>src/components/template/PicUpload/PicUpload.vue</td>     
              </tr> 
              <tr>
                <td>标签定义</td>
                <td>{{label}}</td>     
              </tr>                
              <tr>
                <td>文件获取</td>
                <td>{{code}}</td>              
              </tr>
              <tr>
                <td>文件属性说明</td>
                <td>fileName: 文件名称</br>fileSize: 文件大小</br>file: 文件文件</br>src: 文件url</br>fileData: 文件base64编码</td>          
              </tr>                             
              </tbody>
            </table>
          </div> 
        </div>
      </div>
</section>
</template>

<script>
import uploadVue from './PicUpload.vue'

export default {
  data () {
    return {
      files: [
        {
          fileName: 'baidu.gif',
          fileData: 'https://www.baidu.com/img/baidu_jgylogo3.gif',
          src: 'https://www.baidu.com/img/baidu_jgylogo3.gif'
        }
      ],
      label: '<uploadVue ref="uploadPic" :files="files"></uploadVue>，使用ref属性,files为文件数组用于回显',
      code: 'var temp = this.$refs.uploadPic.getFiles()，uploadPic即定义组件的ref名称'
    }
  },
  methods: {
    opendialog2: function () {
      this.dialogObj2.dialogVisible = true
      Object.assign(this.dialogObj, this.dialogObj2)
    }
  },
  components: {
    uploadVue
  }
}
</script>
