web-component-gallery 2.3.25 → 2.3.26

package/lib/browse/index.jsx

@@ -4,6 +4,17 @@ import { IconFont } from '../index'
 // 引入文件处理工具函数：格式化数据、获取文件类型、预览文件
 import { formatFileData, getFileType, previewFile } from '../../utils/File'
 
+import { Spin, Icon } from 'ant-design-vue'
+
+// 默认显示加载器
+Spin.setDefaultIndicator({
+  indicator: {
+    render() {
+      return <Icon type="loading" />
+    }
+  }
+})
+
 const BrowseProps = {
   // 数据源，支持字符串、数组或对象，默认为空数组
   data: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.object]).def([]),
@@ -46,10 +57,12 @@ const renderContent = function (h, file, images) {
 
   if (!url) return
 
-  const { isThumb, astrictH } = this
+  const { isThumb, astrictH, iframeLoadingState } = this
   const tag = getPreviewType(url)
   const isImage = tag === 'img'
   const isMedia = ['audio', 'video'].includes(tag)
+  const isIframe = tag === 'iframe'
+  const fileId = file.id || url // 使用唯一标识作为 key
 
   // 点击处理函数：如果是图片或缩略图模式，则触发预览
   const handleClick = () => {
@@ -69,9 +82,7 @@ const renderContent = function (h, file, images) {
   // 构建基础标签属性
   const attrs = {
     src: url,
-    // 音视频和 iframe 显示控制条
-    ...((isMedia || tag === 'iframe') && { controls: true }),
-    // 音视频自动播放配置
+    ...((isMedia || isIframe) && { controls: true }),
     ...(isMedia && { autoplay: true, muted: true, playsinline: true })
   }
 
@@ -80,6 +91,28 @@ const renderContent = function (h, file, images) {
     ...(astrictH && { width: 'auto', height: `${astrictH}px` })
   } 
 
+  // iframe 类型添加加载遮罩
+  if (isIframe) {
+    
+    // 初始化加载状态（仅当该文件未记录状态时）
+    if (!(fileId in iframeLoadingState)) {
+      this.$set(this.iframeLoadingState, fileId, true)
+
+      // 超时兜底：5秒后强制关闭加载状态
+      setTimeout(() => {
+        if (this.iframeLoadingState[fileId]) {
+          this.$set(this.iframeLoadingState, fileId, false)
+        }
+      }, 5000)
+    }
+
+    const updateState = () => this.$set(this.iframeLoadingState, fileId, false)
+
+    return <Spin spinning={iframeLoadingState[fileId]} tip="加载中...">
+      <tag {...{ attrs, style }} onLoad={updateState} onError={updateState} />
+    </Spin>
+  }
+
   // 渲染实际的媒体标签
   return <tag {...{ attrs, style }} onClick={handleClick} />
 }
@@ -88,6 +121,18 @@ const renderContent = function (h, file, images) {
 const Browse = {
   name: 'Browse',
   props: BrowseProps,
+  data() {
+    return {
+      iframeLoadingState: {}
+    }
+  },
+  watch: {
+    // 数据源变化时重置所有加载状态
+    data: {
+      handler() { this.iframeLoadingState = {} },
+      deep: true
+    }
+  },
   render(h) {
     const { data, $https, httpsUrl } = this
     // 格式化文件数据，合并 HTTPS 配置

package/lib/browse/style/index.less

@@ -9,4 +9,20 @@ img {
     max-height: 100%;
     object-fit: contain;
     .square(auto);
+}
+
+.ant-spin-nested-loading,
+.ant-spin-container {
+    .layout();
+}
+
+.ant-spin-nested-loading > div > .ant-spin {
+    .ant-spin-dot {
+        font-size: 48px;
+    }
+    .ant-spin-text.ant-spin-text {
+        top: 60%;
+        padding-left: 36px;
+        font-size: @font-size-lg;
+    }
 }

package/package.json

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