在这里,我显示工具提示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>