web-component-gallery 2.0.35 → 2.0.36

package/lib/browse/index.jsx

@@ -1,9 +1,11 @@
 import PropTypes from 'ant-design-vue/es/_util/vue-types'
-
 import { Base64 } from '../../utils/Base64'
+import { IconFont } from '../index'
 
 const BrowseProps = {
   data: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.object]).def([]),
+  /** 是否缩略图显示 */
+  isThumb: PropTypes.bool,
   /** 支持http地址可配置 */
   httpsUrl: PropTypes.object.def({}),
   /** 限制高度 */
@@ -45,7 +47,7 @@ const setInnerData = (data, https) => {
 }
 
 // 不同类型不同容器承载
-const getCustomTag = (url) => {
+export 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'
@@ -54,7 +56,14 @@ const getCustomTag = (url) => {
 }
 
 function renderContent(h, url, images) {
-    const { astrictH, $viewerApi } = this
+    const { isThumb, astrictH, $viewerApi, $postM } = this
+
+    const MEDIA_TYPES = {
+      IFRAME: 'iframe',
+      IMAGE: 'img'
+    }
+
+    const ICON_TYPE = "icon-file_thumb"
 
     const CustomTag = getCustomTag(url)
 
@@ -63,10 +72,17 @@ function renderContent(h, url, images) {
       ...(astrictH && { style: `width: auto; height: ${astrictH}px; objectFit: contain;` })
     }
 
-    if (CustomTag === 'iframe') attrs['controls'] = true
-
     const handleClick = () => {
-      if (CustomTag !== 'img') return
+      if (CustomTag !== MEDIA_TYPES.IMAGE && !isThumb) return
+
+      if (CustomTag === MEDIA_TYPES.IFRAME && isThumb) {
+        $postM({
+          type: 'customModal',
+          name: 'browse',
+          params: { data: { url } }
+        })
+        return
+      }
 
       try {
         $viewerApi({
@@ -80,6 +96,13 @@ function renderContent(h, url, images) {
       } catch(error){ console.error('未安装v-viewer@1.6.4组件库') }
     }
 
+    if (CustomTag === MEDIA_TYPES.IFRAME) {
+      if (isThumb) {
+        return <IconFont type={ICON_TYPE} onClick={handleClick} />
+      }
+      attrs['controls'] = true
+    }
+
     return <CustomTag {...{ attrs }} onClick={handleClick} />
 }
 

package/lib/descriptions-list/index.jsx

@@ -29,6 +29,7 @@ const renderContent = (h, item, details) => {
         transferData(details[item.props], 'Array')
   const props = {
     data,
+    isThumb: true,
     astrictH: 104
   }
   return (
@@ -66,7 +67,7 @@ const DescriptionsList = {
                     renderContent(h, descItem, descDetails)
                   }  
                 </DescriptionsItem>
-              )
+              ) 
             } )
           }
         </Descriptions>

package/lib/icon-font/index.js

@@ -5,7 +5,7 @@ const IconFont = {
     props: {
       scriptUrl: {
         type: String,
-        default: '//at.alicdn.com/t/c/font_4641025_tdg12oa0nfq.js'
+        default: '//at.alicdn.com/t/c/font_4641025_7wxxoh6rdl3.js'
       },
       type: {
         type: String,

package/lib/model/Model.js

@@ -90,7 +90,7 @@ export default {
       // multipleConfig为配置的动态项数据
       return dynamicModel.map((modelItem, key) => {
         // 为动态项时重新定义绑定key、prop等来进行检验
-        props.multipleConfig.map((configItem) => {
+        return props.multipleConfig.map((configItem) => {
           const childAttrs = {
             key,
             prop: `${props.model}.${key}.${configItem.model}`,

package/package.json

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