来自VueJS中另一个条件元素的有害Bootstrap工具提示

时间:2019-07-12 13:04:47

标签: twitter-bootstrap vue.js

在这里,我显示工具提示uplon图片上传失败。第二次尝试时,上传成功后,工具提示会显示在其他我没有工具提示的<i>上。

<template>
    <div class="avatar float-right ml-2 ml-sm-4 d-flex position-relative text-center justify-content-center just">
        <img v-if="avatar" class="d-block mw-100 mh-100 align-middle align-self-center" :src="avatar"/>

        <span class="edit text-muted position-absolute m-1" @click="$refs.avatar.click()">
            <!-- HERE --
            <i v-if="uploading" class="d-block bg-white rounded-circle p-2 fas fa-sync-alt fa-spin"></i>
            <i v-else-if="error" class="d-block bg-white rounded-circle p-2 fas fa-exclamation-triangle text-danger" :data-toggle="error ? 'tooltip' : ''" data-placement="left" :title="error"></i>
            <i v-else class="d-block bg-white rounded-circle p-2 fas fa-pencil-alt"></i>
        </span>

        <input type="file" class="d-none" @change="select" ref="avatar"/>
    </div>
</template>

<script>
    export default {
        name: "EditableAvatar",
        data: function () {
            return {
                uploading: false,
                error: '',
                new_avatar: false,
            }
        },
        props: {
            endpoint: '',
            current_avatar: '',
            file: File
        },
        computed: {
            avatar() {
                return this.new_avatar ? this.new_avatar : this.current_avatar
            },
        },
        methods: {
            select(e) {
                this.uploading = true;
                this.error = '';

                // Collect form data.
                let formData = new FormData();
                formData.set('avatar', e.target.files[0], e.target.files[0].name);
                formData.set('_method', 'PUT');

                // Send ajax request.
                axios.post(this.endpoint, formData, {
                    headers: {'Content-Type': 'multipart/form-data'}
                }).then((response) => {
                    this.uploading = false;
                    this.new_avatar = response.data.user.avatar;
                    Vue.nextTick(function () {
                        // HERE: event these do not stop showing tooltip.
                        $('.avatar [data-toggle="tooltip"]').tooltip('disable');
                        $('.avatar [data-toggle="tooltip"]').tooltip('dispose'); // used in v4
                        $('.avatar [data-toggle="tooltip"]').tooltip('destroy'); // used in v3 and older
                    })
                }).catch((response) => {
                    this.uploading = false;
                    this.error = response.message ? response.message : 'Upload Failed';
                }).finally((response) => {
                    Vue.nextTick(function () {
                        $('.avatar [data-toggle="tooltip"]').tooltip();
                        $('.avatar [data-toggle="tooltip"]').tooltip('show');
                    })
                });
            }
        }
    }
</script>

<style scoped>
    input {
        z-index: 100;
        opacity: 0;
    }
</style>

0 个答案:

没有答案