溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了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寬度大小對應做調整。
感謝你能夠認真閱讀完這篇文章，希望小編分享render函數如何生成圖片彈窗內容對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，遇到問題就找億速云，詳細的解決方法等著你來學習!
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
