本篇文章給大家?guī)?lái)的內(nèi)容是關(guān)于render函數(shù)生成圖片彈窗的代碼示例，有一定的參考價(jià)值，有需要的朋友可以參考一下，希望對(duì)你有所幫助。

項(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)整。

【

總結(jié)

以上是生活随笔為你收集整理的PHP语言弹窗图片,render函数生成图片弹窗的代码示例的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。