web-component-gallery 2.0.18 → 2.0.19

package/lib/browse/index.jsx

@@ -2,67 +2,102 @@ import PropTypes from 'ant-design-vue/es/_util/vue-types'
 
 import { Base64 } from '../../utils/Base64'
 
-import { getPictureAttrs } from '../../utils/Utils'
-
-const pictureType = [ "gif", "jpeg", "png", "jpg", "bmp", "tif", "svg", "psd", "raw", "WMF", "webp", "apng" ]
-const audioType = [ "mp3", "wma", "flac", "aac", "mmf", "amr", "m4a", "m4r", "ogg", "mp2", "wav" ]
-const videoType = [ "avi", "flv", "mpg", "mpeg", "mpe", "m1v", "m2v", "mpv2", "mp2v", "dat", "ts", "tp", "tpr", "pva", "pss", "mp4", "m4v",
-        "m4p", "m4b", "3gp", "3gpp", "3g2", "3gp2", "ogg", "mov", "qt", "amr", "rm", "ram", "rmvb", "rpm" ]
-
 const BrowseProps = {
   data: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.object]).def([]),
   /** 支持http地址可配置 */
   httpsUrl: PropTypes.object.def({}),
   /** 限制高度 */
-  astrictH: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  astrictH: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), 
+}
+
+// 文件类型常量
+const FILE_TYPES = {
+  PICTURE: ["gif", "jpeg", "png", "jpg", "bmp", "tif", "svg", "psd", "raw", "WMF", "webp", "apng"],
+  AUDIO: ["mp3", "wma", "flac", "aac", "mmf", "amr", "m4a", "m4r", "ogg", "mp2", "wav"],
+  VIDEO: ["avi", "flv", "mpg", "mpeg", "mpe", "m1v", "m2v", "mpv2", "mp2v", "dat", "ts", "tp", "tpr", "pva", "pss", "mp4", "m4v", "m4p", "m4b", "3gp", "3gpp", "3g2", "3gp2", "ogg", "mov", "qt", "amr", "rm", "ram", "rmvb", "rpm"]
 }
 
-const renderContent = (h, item, https, astrictH) => {
+// 初始化数据
+const setInnerData = (data, https) => {
+
+  let innerData = data
 
-    const type = item.url.slice(item.url.lastIndexOf('.') + 1).toLowerCase()
+  if (typeof(data) === 'string') {
+    try {
+      innerData = JSON.parse(data)
+    } catch(error) { innerData = [] }
+  }
 
-    const CustomTag = 
-        pictureType.includes(type) && 'img' ||
-        audioType.includes(type) && 'audio' ||
-        videoType.includes(type) && 'video' || 'iframe'
+  const { FILEURL, KKFILEURL, OVERVIEWFILEURL } = https
+
+  innerData = Array.isArray(innerData) ? innerData : [innerData]
+  
+  innerData.forEach(dataItem => {
+    if (!dataItem.url.startsWith('http')) {
+      dataItem.url = 
+       getCustomTag(dataItem.url) === 'iframe' 
+       ? KKFILEURL + encodeURIComponent( Base64.encode( OVERVIEWFILEURL + dataItem.url ) )
+       : FILEURL + dataItem.url
+    }
+  })
+
+  return innerData
+}
+
+// 不同类型不同容器承载
+const getCustomTag = (url) => {
+  const ext = url.slice(url.lastIndexOf('.') + 1).toLowerCase()
+  if (FILE_TYPES.PICTURE.includes(ext)) return 'img'
+  if (FILE_TYPES.AUDIO.includes(ext)) return 'audio'
+  if (FILE_TYPES.VIDEO.includes(ext)) return 'video'
+  return 'iframe'
+}
+
+function renderContent(h, url, images) {
+    const { astrictH, $viewerApi } = this
+
+    const CustomTag = getCustomTag(url)
 
     const attrs = {
-      controls: true,
-      src: https.FILEURL + item.url
-    } 
+      src: url,
+      ...(astrictH && { style: `width: auto; height: ${astrictH}px; objectFit: contain;` })
+    }
+
+    if (CustomTag === 'iframe') attrs['controls'] = true
 
-    CustomTag === 'iframe' 
-    && ( attrs.src = https.KKFILEURL + encodeURIComponent( Base64.encode( https.OVERVIEWFILEURL + item.url ) ) )
+    const handleClick = () => {
+      if (CustomTag !== 'img') return
 
-    if(astrictH) {
-      const style = getPictureAttrs(attrs.src, astrictH)
-      attrs.style = `width: ${style.width}px; height: ${style.height}px;`
+      try {
+        $viewerApi({
+          options: {
+            url: 'url',
+            toolbar: true,
+            initialViewIndex: images.findIndex(file => file.url == url)
+          },
+          images
+        })
+      } catch(error){ console.error('未安装v-viewer@1.6.4组件库') }
     }
-    
-    return (
-      <CustomTag {...{ attrs }} />
-    )
+
+    return <CustomTag {...{ attrs }} onClick={handleClick} />
 }
 
 const Browse = {
   name: 'Browse',
   props: BrowseProps,
   render(h, content) {
-    let { data, $https, httpsUrl, astrictH } = this
-    const https = { ...$https, ...httpsUrl }
-    if(typeof(data) === 'string') {
-        try {
-            data = JSON.parse(data)
-        } catch(error) { data = [] }
-    }
+    const {data, $https, httpsUrl} = this
+    const innerData = setInnerData(data, {...$https, ...httpsUrl})
+
     return (
       <div class="Browse">
         {
-            data instanceof Array ?
-            data.map( dataItem => renderContent(h, dataItem, https, astrictH) ) :
-            renderContent(h, data, https, astrictH)
+          innerData.map( dataItem =>
+            renderContent.call(this, h, dataItem.url, innerData)
+          )
         }
-      </div>
+      </div> 
     )
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "web-component-gallery",
-  "version": "2.0.18",
+  "version": "2.0.19",
   "description": "基础vue、antdvue、less实现的私有组件库",
   "main": "dist/index.umd.js",
   "files": [

package/utils/Utils.js

@@ -29,23 +29,33 @@ export function downLoadFn( response, name, type = "application/vnd.ms-excel" )
 }
 
 /**
- *  获取图片宽高 (如超出限制高度，则根据高度比计算出对应的宽度比)
- *  url 图片地址
- *  astrictH  限制高度
+ * 获取图片宽高 (如超出限制高度，则根据高度比计算出对应的宽度比)
+ * @param {string} url - 图片地址
+ * @param {number} astrictH - 限制高度
+ * @returns {Object} 包含width和height属性的对象
  */
-export function getPictureAttrs( url, astrictH ) {
-    let image = new Image()
-    image.src = url
-    function getPictureSize(image) {
-      /** 解决图片过大还处于加载中出现的第一次获取宽高为0的情况 */
-      if(image.width == 0) return setTimeout(() =>getPictureSize(image), 600)
-      return { width: image.width, height: image.height }
-    } 
-    let style = getPictureSize(image)
-    if(style.height > astrictH) {
-      const scale = astrictH / style.height
-      style.width = style.width * scale
-      style.height = astrictH
-    }
-    return style
+export function getPictureAttrs(url, astrictH) {
+    return new Promise((resolve) => {
+        const image = new Image()
+        image.src = url
+        
+        // 确保图片加载完成
+        image.onload = () => {
+            const { width, height } = image
+            
+            if (height > astrictH) {
+                const scale = astrictH / height
+                resolve({
+                    width: width * scale,
+                    height: astrictH
+                })
+                return
+            }
+
+            resolve({ width, height })
+        }
+        
+        // 错误处理
+        image.onerror = () => resolve({ width: 0, height: 0 })
+    })
 }