ファジーボックスでWebUploaderを使用する手順の詳細な説明

今回は、ファジーボックスでWebUploaderを使用する手順について詳しく説明します。ファジーボックスでWebUploaderを使用する場合の注意点を実際のケースで見てみましょう。

私の卒業制作では、BootstrapぼやけたボックスにWebUploaderのUploadボタンを表示する必要があります。その効果は次のとおりです:

アップロードされたコンポーネントをBootstrapに直接挿入しました。ぼやけたボックス:

ただし、実際の効果は、ぼかしボックスが表示されると、アップロード ボタンをクリックできなくなります。

しかし、コンソールでエラーがあるかどうかを確認するために F12 を押した後、WebUploader は実際にファイル選択ボックスをポップアップ表示でき、他の機能は正常でした。

データを確認したところ、バグの原因は[ファイルを選択]ボタンの長さと幅が両方とも0であり、WebページにF12の機能があるため再レンダリングする必要があることがわかりました。 Web ページをレンダリングする場合、解決策は、Uploader を再レンダリングするかインスタンス化することです。再インスタンス化する必要があります: uploader.refresh()uploader.refresh()

第一想法就是就是给模糊框的按钮注册点击事件，点击弹出模糊框的时候进行uploader.refresh()

最初のアイデアは、ぼかしボックス イベント

では、ポップアップぼかしボックスをクリックすると uploader.refresh() が実行されますが、修正後のその他のバグ。

最後の解決策は、ブラー ボックスによってトリガーされるイベントをリッスンしてから、コンポーネントを更新することです:

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

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、次の点に注意してください。その他の関連記事は PHP 中国語 Web サイトにあります。

推奨読書:
Vue が Echarts コンポーネントを動的に更新する方法

Vue.js での計算ユースケースの詳細な説明

🎜🎜

以上がファジーボックスでWebUploaderを使用する手順の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。