# yuUpload 文件选择上传组件

<template>
  <demo-section demoName="demo-checkbox">
    <demo-block :title="$t('basicUsage')">
      <yu-upload ref="refCommUpload" @refresh="refreshFn"></yu-upload>
      <div class="add-btn" @click="addFn">
        <p class="add-icon">+</p>
        <p class="add-text">上传资料</p>
      </div>
    </demo-block>
  </demo-section>
</template>

<script>
import demoBlock from '@/views/mbank/index/components/demoblock.vue'
import demoSection from '@/views/mbank/index/components/demoSection.vue'
import yuUpload from '@/components/yu-upload/index.vue'
export default {
  components: {
    demoSection,
    demoBlock,
    yuUpload
  },
  data() {
    return {
      currFileList: [],
      uploadParams: {},
      type: ''
    };
  },
  methods: {
    refreshFn(value) {
      // 重新请求服务器已上传文件列表，更新currFileList
      console.log('页面', value);
    },
    addFn() {
      this.$refs.refCommUpload.open();
    }
  }
};
</script>

<style lang="scss">
.add-btn {
    position: absolute;
    bottom: 109px;
    left: 50%;
    transform: translateX(-50%);
    width: 208px;
    height: 56px;
    line-height: 56px;
    font-size: 26px;
    color: #2877ff;
    font-weight: 400;
    background: rgba(216, 216, 216, 0);
    border: 1px solid rgba(40, 119, 255, 1);
    border-radius: 28px;
    .add-icon {
      float: left;
      margin-left: 10px;
      margin-right: 8px;
      font-size: 56px;
    }
    
  }
</style>