<template>
  <div class="hello">
   <ul>
     <li>
        <!-- <poi-upload class="btn" :multiple="false" :accept="accept">默认</poi-upload> -->
        <poi-upload class="btn" type="primary" :acceptLimit="3" 
            @fileUploadChange="fileUploadChange" @fileDel="fileDel" :fileListShow="true">点击上传</poi-upload>
        <poi-download class="btn" type="primary" :loadMethod="'get'" :loadUrl="'http://localhost:8081/static/test.json'" :fileName="'test.json'">下载json</poi-download>
        <poi-download class="btn" type="primary" :loadMethod="'get'" :loadUrl="'http://localhost:8081/static/a.png'" :fileName="'a.png'">下载图片</poi-download>        
        <!-- 批量注册 -->
        <component :is="item.name" v-for="(item,index) in currentTabComponentList" :key="index" :type="item.type">{{item.text}}</component>
     </li>
   </ul> 
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      freestyle:{
        btnstyle:[
          ".btnstyle{color:green;background:#ebb563;}",
          ".btnstyle:hover{background:red;}",
        ]
      },
      freestyle2:{
        btnstyle:[
          ".btnstyle{color:#FFF;background:blue;}",
          ".btnstyle:hover{background:yellow;}",
        ]
      },
      accept:".jpg",
      currentTabComponent:"poi-button",
      currentTabComponentList:[
        {name:'poi-button',text:"第一个",type:"primary"},
        {name:'poi-button',text:"第二个",type:"success"},
      ]
    }
  },
  methods:{
    // 上传文件
    fileUploadChange(val){
      console.log(val)
    },
    // 文件删除 
    fileDel(val){
      console.log(val)
    },
  }
}
</script>

<style scoped>
.hello{
    margin: 0 auto;
    width: 500px;
}
.btn{
  margin-bottom:10px;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
  list-style-type:none;
}
a {
  color: #42b983;
}
</style>
