本篇文章給大家帶來的內容是關于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,

},

})

}

})

},

render中第一個箭頭函數的參數h就是createElement方法，createElement的第一個字符串形式的參數img是標簽。

第二個參數是一個對象，定義了圖片的class，attrs里src是圖片路徑，width定義了圖片顯示的寬度，這個寬度值可以根據Modal寬度大小對應做調整。

【

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。