前言

• 若依(ruoyi)： v4.3
• 360極速瀏覽器 12.0.1550.0 (正式版本) （32 位）
• 操作系統(tǒng) Windows 10 OS Version 2004 (Build 19041.572)
• JavaScript V8 7.8.279.23
• jQuery v2.1.4

表格圖片預(yù)覽功能

若依(ruoyi)自帶了一個(gè)表格圖片預(yù)覽功能。該功能可以在示例演示>表格>表格圖片預(yù)覽功能中找到。

表格圖片預(yù)覽功能圖片超寬問(wèn)題

表格圖片預(yù)覽功能遇到超寬圖片（比如屏幕寬度1024px，圖片寬度為1800px）時(shí)，圖片會(huì)將彈出層撐寬至與圖片同寬（只有設(shè)定圖片寬度是auto時(shí)，才會(huì)出現(xiàn)此問(wèn)題）。這時(shí)，將無(wú)法看到關(guān)閉按鈕，也就無(wú)法關(guān)閉圖片預(yù)覽功能。

表格圖片預(yù)覽功能圖片超寬時(shí)，改為指定圖片寬度

表格圖片預(yù)覽功能圖片超寬時(shí)，將圖片寬度指定一個(gè)小于當(dāng)前窗口的寬度值，這樣就可以看到關(guān)閉按鈕，或者看到部分留白（點(diǎn)擊留白部分也可以關(guān)閉圖片預(yù)覽）。

找到ry-ui.js，在其中找到下面部分的代碼：

// 圖片預(yù)覽事件 $(optionsIds).off("click").on("click", '.img-circle', function() {var src = $(this).attr('src');var target = $(this).data('target');if($.common.equals("self", target)) {var height = $(this).data('height');var width = $(this).data('width');// 如果是移動(dòng)端，就使用自適應(yīng)大小彈窗if ($.common.isMobile()) {width = 'auto';height = 'auto';}layer.open({id: "div_img",title: false,type: 1,closeBtn: true,shadeClose: true,area: ['auto', 'auto'],content: "<img src='" + src + "' height='" + height + "' width='" + width + "'/>",});} else if ($.common.equals("blank", target)) {window.open(src);} });

在上面的代碼中添加success回調(diào)函數(shù)，添加后代碼如下：

// 圖片預(yù)覽事件 $(optionsIds).off("click").on("click", '.img-circle', function() {var src = $(this).attr('src');var target = $(this).data('target')||"self";if($.common.equals("self", target)) {var height = $(this).data('height')||"auto";var width = $(this).data('width')||"auto";// 如果是移動(dòng)端，就使用自適應(yīng)大小彈窗if ($.common.isMobile()) {width = 'auto';height = 'auto';}layer.open({id: "div_img", /* 給個(gè)固定的ID，方便后面查找元素 */title: false,type: 1,closeBtn: true, /* 關(guān)閉按鈕 */shadeClose: true, /* 點(diǎn)擊陰影區(qū)域關(guān)閉彈窗 */area: ['auto', 'auto'],content: "<img src='" + src + "' height='" + height + "' width='" + width + "'/>",success: function(layero, index){// 圖片加載完成后，再次處理圖片寬度$('#div_img > img', layero).load(function(){// 獲取圖片寬和高let imgElement = $('#div_img > img', layero);let imgWidth = imgElement.width();let imgHeight = imgElement.height();// 獲取 mainContent 寬和高。若依中，多數(shù)情況下頁(yè)面嵌套頁(yè)面。 let mainContent = $('#content-main', window.parent.document);if (mainContent.length<=0) {/* 修正mainContent：如果在新窗口中打開(kāi)鏈接時(shí)，沒(méi)有父級(jí)窗口 */mainContent = $(window);}let mainContentWidth = mainContent.width();let mainContentHeight = mainContent.height();/* 計(jì)算圖片的寬度 */let newImgWidth = imgWidth;/* 圖片超寬時(shí)，將圖片的寬度設(shè)置為當(dāng)前窗口的95%。圖片高度auto */if (imgWidth > mainContentWidth*0.95) {newImgWidth = mainContentWidth*0.95;}/* 圖片超高時(shí)，計(jì)算一個(gè)讓圖片不超高的寬度。圖片高度auto */if (imgHeight > mainContentHeight*0.95) {let tmpNewImgWidth = imgWidth*(mainContentHeight*0.95/imgHeight);if (newImgWidth > tmpNewImgWidth) {newImgWidth = tmpNewImgWidth;}}// 重設(shè)圖片的寬和高// 圖片容器的高度設(shè)置為auto，不設(shè)置時(shí)，該容器的高度為固定值$("#div_img", layero).height('auto');// 指定圖片的寬度$("#div_img > img", layero).attr({width: newImgWidth });// 很重要。觸發(fā)窗口的 resize 事件，讓 layer 調(diào)整位置。$(window).resize();});}});} else if ($.common.equals("blank", target)) {window.open(src);} });

參考

https://www.w3school.com.cn/jquery/event_resize.asp
https://www.cnblogs.com/ymy124/p/4538695.html
https://www.w3school.com.cn/jquery/attributes_attr.asp
https://www.w3school.com.cn/jquery/css_height.asp
https://www.w3school.com.cn/jquery/css_width.asp

總結(jié)

以上是生活随笔為你收集整理的【若依(ruoyi)】表格图片预览功能图片超宽、超高问题的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。