render 関数を使用して画像ポップアップ ウィンドウを生成するコード例

この記事の内容は、画像ポップアップウィンドウを生成するための render 関数のコード例に関するもので、一定の参考価値があります。必要な友人は参考にしていただければ幸いです。

プロジェクト内のサムネイルのリストが表示されるので、ダブルクリック画像のポップアップ ウィンドウ効果を作成することにしました。プロジェクトは iview UI フレームワークを使用し、Modal コンポーネントを使用します。以下はオリジナルです。 render 関数によって生成された画像ポップアップ ボックスのコード。ダブルクリック アクションは showLargeImage メソッドを呼び出します。以下はダブルクリック アクションの元のコードです。

            showLargeImage(item){
                console.log(111);
                if(!item.img_url){
                    this.$Message('未获取到图片！');
                    return;
                }
                this.$Modal.confirm({
                    width:444,
                    render: (h) => {
                        return h('img', {
                            'class':'render_img',
                            attrs: {
                                src: this.api.baseURL+item.img_url,
                                width:400,
                            },
                        })
                    }
                })
            },

レンダリングの最初の矢印関数のパラメータ h は createElement メソッドで、最初の文字列パラメータ img です。 createElement のラベルです。

2 番目のパラメータは画像のクラスを定義するオブジェクトです。attrs の src は画像のパスです。幅は画像表示の幅を定義します。この幅の値はモーダル幅に従って調整できます。

【関連する推奨事項: JavaScript ビデオ チュートリアル ]

以上がrender 関数を使用して画像ポップアップ ウィンドウを生成するコード例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。