render函數(shù)如何生成圖片彈窗

這篇文章主要介紹了render函數(shù)如何生成圖片彈窗，具有一定借鑒價(jià)值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。

項(xiàng)目中列表顯示縮略圖，決定做一個(gè)雙擊的圖片彈窗效果，項(xiàng)目用的iview的UI框架，用到Modal組件的，以下是render函數(shù)生成的圖片彈框的原始代碼。雙擊動(dòng)作調(diào)用showLargeImage方法，以下是雙擊動(dòng)作的原始代碼

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

render中第一個(gè)箭頭函數(shù)的參數(shù)h就是createElement方法，createElement的第一個(gè)字符串形式的參數(shù)img是標(biāo)簽。

第二個(gè)參數(shù)是一個(gè)對(duì)象，定義了圖片的class，attrs里src是圖片路徑，width定義了圖片顯示的寬度，這個(gè)寬度值可以根據(jù)Modal寬度大小對(duì)應(yīng)做調(diào)整。

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享render函數(shù)如何生成圖片彈窗內(nèi)容對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，遇到問題就找億速云，詳細(xì)的解決方法等著你來學(xué)習(xí)!