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

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

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

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/109307.html

相關(guān)文章

從Dialog管理談到Vue渲染原理

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

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

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

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

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

PumpkinDylan 2019-08-23 12:50 評(píng)論0 收藏0
一個(gè)基于React整套技術(shù)棧+Node.js的前端頁(yè)面制作工具

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

ermaoL 2019-08-26 11:46 評(píng)論0 收藏0
React中使用UEditor

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

firim 2019-08-26 12:17 評(píng)論0 收藏0