render函數產生圖片彈跳窗的程式碼範例

這篇文章帶給大家的內容是關於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寬度大小對應做調整。

【相關推薦：JavaScript影片教學】

#

以上是render函數產生圖片彈跳窗的程式碼範例的詳細內容。更多資訊請關注PHP中文網其他相關文章！