Exemple de code d'utilisation de la fonction de rendu pour générer une fenêtre contextuelle d'image

Ce que cet article vous apporte est un exemple de code pour la fonction de rendu permettant de générer une fenêtre contextuelle d'image. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Le projet répertorie les vignettes et a décidé de créer un effet pop-up d'image en double-clic. Le projet utilise le framework iview UI et le composant Modal. Voici le code original de la fenêtre contextuelle d'image générée par. la fonction de rendu. L'action de double-clic appelle la méthode showLargeImage. Voici le code original de l'action de double-clic

            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,
                            },
                        })
                    }
                })
            },

Le paramètre h de la première fonction de flèche dans le rendu est la méthode createElement et la première chaîne. Le paramètre img de createElement est l'étiquette.

Le deuxième paramètre est un objet qui définit la classe de l'image. src dans attrs est la largeur du chemin de l'image qui définit la largeur de l'affichage de l'image. Cette valeur de largeur peut être ajustée en fonction de la largeur modale.

[Recommandations associées : Tutoriel vidéo JavaScript]

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!