Explication détaillée des étapes pour utiliser WebUploader dans la boîte floue

Cette fois, je vais vous donner une explication détaillée des étapes d'utilisation de WebUploader dans la boîte floue. Quelles sont les précautions pour utiliser WebUploader dans la boîte floue Voici un cas pratique, prenons un. regarder.

Dans mon projet de fin d'études, il est obligatoire d'afficher le bouton Télécharger de WebUploader dans la zone floue Bootstrap L'effet est le suivant :

Nous avons inséré le composant téléchargé directement dans la zone de flou de Bootstrap :

Cependant, l'effet réel est que la zone de flou agit comme une zone de flou. Après son apparition, je ne peux pas cliquer sur le bouton de téléchargement.

Cependant, après avoir appuyé sur F12 pour vérifier s'il y avait une erreur dans la console, WebUploader pouvait en fait faire apparaître la boîte de sélection de fichier et les autres fonctions étaient normales.

Après avoir consulté les données, j'ai découvert que la raison du bug est que la longueur et la largeur du bouton [Sélectionner un fichier] sont toutes deux égales à 0, et que la page Web doit être restituée, et F12 arrive à ont pour fonction de restituer des pages Web. La solution consiste à restituer ou à créer une instance de Uploader. Besoin d'être ré-instancié : uploader.refresh()

La première idée est d'enregistrer l'événement de clic pour le bouton de la boîte de flou, et de le faire lorsque la boîte de flou apparaît uploader.refresh() cependant, quand j'ai l'impression qu'il y a d'autres bugs après la modification.

La solution finale est d'écouter l'événement déclenché par la zone de flou, puis de rafraîchir le composant :

$('#updateModal').on('shown.bs.modal',function() {//提示框显示时候触发
    uploader.refresh();   //刷新当前webUploder
 });

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article .Pour des choses plus excitantes, veuillez prêter attention à php Chinois Autres articles connexes en ligne !

Lecture recommandée :

Comment Vue utilise les composants Echarts actualisés dynamiquement

Explication détaillée des cas d'utilisation calculés dans Vue.js

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!