UIKit загрузить несколько экземпляров или проблема приоритета события - PullRequest
Новая
       21

UIKit загрузить несколько экземпляров или проблема приоритета события

0 голосов
/ 10 мая 2019

Я использую UIKit в качестве основы веб-интерфейса и VueJS для создания некоторых компонентов.

Я использую компонент VueJS для загрузки изображений, поэтому экземпляр UIkit.upload();

Я использую этот компонент дважды на одной странице, поэтому срабатывают два экземпляра UIkit.upload();.

Первый вопрос

Первый вопрос, возможно ли использовать один и тот же экземпляр UIkit.upload(); дважды? или я должен использовать только один ( он не упомянут в документации ).

Второй вопрос

Второй вопрос, событие, возникшее во время полной загрузки изображений, извлекается ( обработано ) для первого компонента, используемого на странице, так что второй компонент не имеет вызова.

код

Здесь код для загрузки файла изображения по одному. 

<script type="text/ecmascript-6">
    import * as UIkit from "uikit";

    export default {
        data() {
            return {
                url: '',
                bar: null
            }
        },

        mounted() {
            this.bar = document.getElementById('js-progressbar');

            this.init();
        },

        methods: {
            init() {
                let vueInstance = this;
                UIkit.upload('.js-upload', {
                    url: '/dashboard/media/uploads',
                    multiple: false,
                    method: 'POST',
                    name: 'image',
                    mime: 'image/*',
                    beforeSend: vueInstance.beforeSend,
                    beforeAll: vueInstance.beforeAll,
                    load: vueInstance.load,
                    error: vueInstance.error,
                    complete: vueInstance.complete,
                    loadStart: vueInstance.loadStart,
                    progress: vueInstance.progress,
                    loadEnd: vueInstance.loadEnd,
                    completeAll: vueInstance.completeAll
                });
            },
            beforeAll() {},
            beforeSend(e) {
                e.headers = {
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                }
            },
            load() {},
            error() {},
            complete(e) {
                this.$emit('changed', {
                    url: e.response
                });
            },
            loadStart(e) {
                this.$emit('uploading');

                this.bar.removeAttribute('hidden');
                this.bar.max = e.total;
                this.bar.value = e.loaded;
            },
            progress(e) {
                this.bar.max = e.total;
                this.bar.value = e.loaded;
            },
            loadEnd(e) {
                this.bar.max = e.total;
                this.bar.value = e.loaded;
            },
            completeAll() {
                this.bar.setAttribute('hidden', 'hidden');
            }
        }
    }
</script>

<template>
    <div>
        <div class="js-upload uk-placeholder uk-text-center">
            <span uk-icon="icon: cloud-upload"></span>
            <span class="uk-text-middle">Attach image by dropping that here or</span>
            <div uk-form-custom>
                <input name="image" type="file" multiple>
                <span class="uk-link">selecting one</span>
            </div>
        </div>

        <progress id="js-progressbar" class="uk-progress" value="0" max="100" hidden></progress>
    </div>
</template>
...