render函數(shù)生成圖片彈窗實例(自己項目實際代碼）

時飛發(fā)布于2019-08-26 13:41 / 1651人閱讀

摘要：項目中列表顯示縮略圖，決定做一個雙擊的圖片彈窗效果，項目用的的框架，用到組件的，以下是函數(shù)生成的圖片彈框的原始代碼。第二個參數(shù)是一個對象，定義了圖片的，里是圖片路徑，定義了圖片顯示的寬度，這個寬度值可以根據(jù)寬度大小對應做調整。

項目中列表顯示縮略圖，決定做一個雙擊的圖片彈窗效果，項目用的iview的UI框架，用到Modal組件的，以下是render函數(shù)生成的圖片彈框的原始代碼。雙擊動作調用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中第一個箭頭函數(shù)的參數(shù)h就是createElement方法，createElement的第一個字符串形式的參數(shù)img是標簽。

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

GPU云服務器云服務器 js生成彈窗 webrtc怎么實際應用在項目中圖片實際寬高圖片彈窗

文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://systransis.cn/yun/109307.html

從Dialog管理談到Vue渲染原理

摘要：在組件內，我們觸及不到組件的模板，所以簡單的在動態(tài)模板上添加并不能完成事件監(jiān)聽。簡單來說，依賴收集是在渲染函數(shù)渲染的函數(shù)中進行的，在中一旦通過使用了這個變量，通過這個變量的就收集到了正在執(zhí)行的渲染函數(shù)這一個依賴。作為一個中后臺表單&表格工程師，經(jīng)常需要在一個頁面中處理多個彈窗。我自己的項目中，一個復雜的審核頁面中的彈窗數(shù)量超過了30個，如何管理大量的彈窗就成為了一個需要考慮的問題。 ...

darkbug 2019-08-23 13:56 評論0 收藏0
如何將jsx代碼放到自定義的dom中？- ReactDOM.render - React

摘要：如何將代碼放到自定義的中真實經(jīng)歷最近開發(fā)項目的時候，需要實現(xiàn)圖片的預覽并下載，想著也不難，自己寫一個預覽效果吧。如何將jsx代碼放到自定義的dom中？ - Eric 真實經(jīng)歷最近開發(fā)項目的時候，需要實現(xiàn)圖片的預覽并下載，想著也不難，自己寫一個預覽效果吧。其實預覽就是一個彈窗(Modal)，實現(xiàn)彈窗有兩種方案：1、使用es6的寫法，直接將彈窗和按鈕放在一起，代碼大概如下： /* I...

joywek 2019-08-02 11:55 評論0 收藏0
如何將jsx代碼放到自定義的dom中？- ReactDOM.render - React

摘要：如何將代碼放到自定義的中真實經(jīng)歷最近開發(fā)項目的時候，需要實現(xiàn)圖片的預覽并下載，想著也不難，自己寫一個預覽效果吧。如何將jsx代碼放到自定義的dom中？ - Eric 真實經(jīng)歷最近開發(fā)項目的時候，需要實現(xiàn)圖片的預覽并下載，想著也不難，自己寫一個預覽效果吧。其實預覽就是一個彈窗(Modal)，實現(xiàn)彈窗有兩種方案：1、使用es6的寫法，直接將彈窗和按鈕放在一起，代碼大概如下： /* I...

PumpkinDylan 2019-08-23 12:50 評論0 收藏0
一個基于React整套技術棧+Node.js的前端頁面制作工具

摘要：是一個前端頁面制作工具，方便產品，運營和視覺的同學迅速開發(fā)簡單的前端頁面，從而可以解放前端同學的工作量。支持恢復現(xiàn)場功能關閉頁面配置不丟失支持操作。提供了一個方法，用于的拆分。就是發(fā)出的通知，表示應該要發(fā)生變化了。 pagemaker是一個前端頁面制作工具，方便產品，運營和視覺的同學迅速開發(fā)簡單的前端頁面，從而可以解放前端同學的工作量。此項目創(chuàng)意來自網(wǎng)易樂得內部項目nfop中的page...

ermaoL 2019-08-26 11:46 評論0 收藏0
React中使用UEditor

摘要：前言本文將介紹筆者在的項目中使用百度的富文本編輯器的過程。以百度官網(wǎng)的為例，控制臺輸入為該編輯器注冊點擊事件，當點擊加粗按鈕時，控制臺輸出為了避免點擊工具條時觸發(fā)事件，筆者將自定義的事件全部注釋了。前言本文將介紹筆者在React的項目中使用百度的富文本編輯器Ueditor的過程。注意本文不提供一條龍式的使用方法，只是將使用過程中的一些實現(xiàn)思路進行總結，供以參考。react項目中導入...

firim 2019-08-26 12:17 評論0 收藏0