Code example of using render function to generate picture pop-up window

The content of this article is about the code example of the render function to generate a picture pop-up window. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

The list of thumbnails in the project is displayed, and we decided to make a double-click picture pop-up window effect. The project uses the iview UI framework and uses the Modal component. The following is the original code of the picture pop-up box generated by the render function. The double-click action calls the showLargeImage method. The following is the original code of the double-click action

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

The parameter h of the first arrow function in render is the createElement method, and the first string parameter img of createElement is the label.

The second parameter is an object that defines the class of the image. src in attrs is the image path. width defines the width of the image display. This width value can be adjusted according to the Modal width.

【Related recommendations: JavaScript video tutorial】

The above is the detailed content of Code example of using render function to generate picture pop-up window. For more information, please follow other related articles on the PHP Chinese website!