0

Uppy 仪表板中的选项在显示时显示为左对齐，而不是显示在我们认为是默认行为的中心。此外，我们如何自定义类 - '@uppy/core/dist/style.css' 和 '@uppy/dashboard/dist/style.css'。

请参阅随附的屏幕截图和下面使用的代码。

在此处输入图像描述

<template>
<span>
    <slot :open="open"></slot>
        <b-modal id="bv-modal-example"  hide-footer>
            <dashboard :uppy="uppy" :plugins="['Webcam','GoogleDrive']" :props="{theme: 'dark'}" />
        </b-modal>      
</span>
</template>

<script>
import { Dashboard } from '@uppy/vue'
import '@uppy/core/dist/style.css'
import '@uppy/dashboard/dist/style.css'

import Uppy from '@uppy/core'
import Webcam from '@uppy/webcam'
import GoogleDrive from '@uppy/google-drive'   

let fileNames = []

export default{
  name: 'App',
  components: {
    Dashboard
  },
  computed: {
    uppy: () => new Uppy({restrictions: {maxFileSize: 1000000,maxNumberOfFiles:5,allowedFileTypes: ['.pdf','.docx']}}).use(
        Webcam,
        GoogleDrive, {
            target: Dashboard,
            companionUrl: 'https://companion.uppy.io/',
        }
    )
    .on('complete', (result) => {
        for( var i = 0; i < result.successful.length; i++ ) {
            console.log(result.successful[i].name)
            let fileN = {
                "name": result.successful[i].name,
                "type": result.successful[i].meta.type
            }
            fileNames.push(fileN);
        }
    })
  },
  beforeDestroy () {
    this.uppy.close()
  },
  methods:{
    open:function(){
        this.$bvModal.show('bv-modal-example')
    },
    remove(key){
        this.file.splice( key, 1 );
    }
  }
}
</script>

上面的代码在单击按钮时显示

<kr-file v-slot="{open}" @uploaded="create">
        <b-button pill variant="warning" @click="open()"> <i class="ion ion-md-cloud-upload 
        mr-2"></i>Upload</b-button>
</kr-file>
4

0 回答 0