web-component-gallery 2.3.26 → 2.3.28

package/lib/amap-draw/index.jsx

@@ -40,7 +40,9 @@ export const AmapDrawProps = {
   // 是否为纯展示模式（不显示控制按钮）
   isExhibition: PropTypes.bool.def(false),
   // 自定义绘制操作按钮
-  drawButtonOperate: PropTypes.array
+  drawButtonOperate: PropTypes.array,
+  // 绘制时是否清除地图上的覆盖物
+  clearOnDraw: PropTypes.bool.def(true)
 }
 
 export default {
@@ -90,8 +92,8 @@ export default {
     // 监听绘制信息变化，当变化时重新渲染对应类型的绘制图层
     drawInfo: {
       handler(newVal) {
-         newVal && this.echoDrawLayers(this.drawType)
-         },
+        newVal && this.echoDrawLayers(this.drawType)
+      },
       deep: true
     },
     // 监听所有绘制信息变化，重新渲染全部绘制图层
@@ -217,8 +219,11 @@ export default {
 
     // 清除当前绘制的所有图层
     handleDrawClear() {
-      // 清理地图上的所有覆盖物
-      this.cleanOverlays()
+      // 根据配置决定是否清除之前的绘制内容
+      if (this.clearOnDraw) {
+        this.cleanOverlays()
+      }
+      
       // 重置绘制图层数组
       this.drawLayers = null
       // 重置绘制图层信息
@@ -233,12 +238,16 @@ export default {
       } 
       // 分配绘制图层信息
       this.assignDrawLayers(this.drawType)
+      // 触发保存事件
+      this.$emit('drawSave')
     },
 
     // 取消绘制操作
     handleDrawReset() {
       // 直接调用清除方法
       this.handleDrawClear()
+      // 触发取消事件
+      this.$emit('drawCancel')
     },
 
     // 处理搜索结果选择

package/lib/descriptions-list/index.jsx

@@ -15,6 +15,18 @@ const DESC_DEFAULT_ATTRS = {
   bordered: true
 }
 
+// 响应式列数配置：根据容器宽度动态计算列数
+const COLUMN_CONFIG = [
+  { minWidth: 1600, getColumn: (column) => column || 4 },
+  { minWidth: 1200, getColumn: (column) => Math.min(4, column) },
+  { minWidth: 992, getColumn: (column) => Math.min(3, column) },
+  { minWidth: 576, getColumn: (column) => Math.min(2, column) },
+  { minWidth: 0, getColumn: () => 1 }
+]
+
+// 防抖延迟时间（毫秒）
+const RESIZE_DEBOUNCE_DELAY = 150
+
 // 组件的 Props 定义
 const DescriptionsProps = {
   title: PropTypes.string, // 标题
@@ -37,10 +49,9 @@ const renderContent = (h, item, details) => {
   const CustomTag = item.type === 'file' ? Browse : 'span'
   
   // 获取内容值：优先使用自定义渲染函数，否则直接取数据
-  const getContentValue = () => 
-    item.customRender ? item.customRender(details[item.props], details) : details[item.props]
-  
-  const contentValue = getContentValue()
+  const contentValue = item.customRender 
+    ? item.customRender(details[item.props], details) 
+    : details[item.props]
   
   // 处理数据：如果是文件类型且未自定义渲染，则进行数据转换
   const processData = () => {
@@ -54,24 +65,13 @@ const renderContent = (h, item, details) => {
     return contentValue
   }
   
-  const data = processData()
-  
   return (
-    <CustomTag {...{ props: { data, isThumb: true, astrictH: 78 } }}>
+    <CustomTag {...{ props: { data: processData(), isThumb: true, astrictH: 78 } }}>
       {contentValue ?? '暂无'}
     </CustomTag>
   )
 }
 
-// 响应式列数配置：根据容器宽度动态计算列数
-const COLUMN_CONFIG = [
-  { minWidth: 1600, getColumn: (column) => column || 4 },
-  { minWidth: 1200, getColumn: (column) => Math.min(4, column) },
-  { minWidth: 992, getColumn: (column) => Math.min(3, column) },
-  { minWidth: 576, getColumn: (column) => Math.min(2, column) },
-  { minWidth: 0, getColumn: () => 1 }
-]
-
 const DescriptionsList = {
   name: 'DescriptionsList',
   props: DescriptionsProps,
@@ -81,44 +81,33 @@ const DescriptionsList = {
       resizeTimer: null // 防抖定时器
     }
   },
-  
+
   mounted() {
     this.initComponent()
   },
   
+  updated() {
+    // DOM 更新后重新计算宽度
+    this.$nextTick(this.setDescContentWidth)
+  },
+  
   beforeDestroy() {
     this.cleanupResize()
   },
   
   methods: {
-    // 初始化组件逻辑
-    initComponent() {
-      if (this.isResponsive) {
-        this.setDescContentWidth()
-        this.bindResize()
-        return
-      }
-      this.responsiveColumn = this.getColumnValue()
-    },
+    // 初始化组件
     initComponent() {
-      if (this.isResponsive) {
-        this.setDescContentWidth()
-        this.bindResize()
-        return
-      }
-      this.responsiveColumn = this.getColumnValue()
-      this.$nextTick(() => {
-        const container = this.$refs.Descriptions
-        if (container) this.updateItemStyles(container, container.offsetWidth)
-      })
+      // 响应式模式：绑定事件监听；非响应式模式：使用固定列数
+      this.isResponsive ? this.bindResize() : (this.responsiveColumn = this.getColumnValue())
+      // 确保 DOM 渲染后设置宽度
+      this.$nextTick(this.setDescContentWidth)
     },
     
     // 清理窗口大小监听和定时器
     cleanupResize() {
-      if (this.resizeTimer) {
-        clearTimeout(this.resizeTimer)
-        this.resizeTimer = null
-      }
+      clearTimeout(this.resizeTimer)
+      this.resizeTimer = null
     },
     
     // 绑定窗口大小变化事件
@@ -128,90 +117,68 @@ const DescriptionsList = {
     
     // 处理窗口大小变化（带防抖）
     handleResize() {
-      if (this.resizeTimer) clearTimeout(this.resizeTimer)
-      this.resizeTimer = setTimeout(() => {
-        this.setDescContentWidth()
-      }, 150)
+      this.cleanupResize()
+      this.resizeTimer = setTimeout(this.setDescContentWidth, RESIZE_DEBOUNCE_DELAY)
     },
     
     // 获取非响应式模式下的列数值
     getColumnValue() {
-      return typeof this.column === 'object' ? this.column.xs : this.column || 4
+      return typeof this.column === 'object' ? this.column.xs : (this.column || 4)
     },
     
     // 根据当前宽度获取应显示的列数
     getCurrentColumn(width) {
-      const config = COLUMN_CONFIG.find(item => width >= item.minWidth)
-      return config?.getColumn(this.column) ?? 1
+      return COLUMN_CONFIG.find(item => width >= item.minWidth)?.getColumn(this.column) ?? 1
     },
     
     // 计算并设置描述内容的宽度和列数
     setDescContentWidth() {
-      if (!this.isResponsive) return
-
       const container = this.$refs.Descriptions
-      if (!container) return 
-      
-      const viewElement = container.querySelector('.ant-descriptions-view')
-      if (!viewElement) return
-      
-      const width = viewElement.offsetWidth
-      // 如果宽度为 0（可能尚未渲染），延迟重试
-      if (width === 0) {
-        setTimeout(() => this.setDescContentWidth(), 100)
-        return
-      }
+      const width = container.querySelector('.ant-descriptions-view').offsetWidth
       
-      this.responsiveColumn = this.getCurrentColumn(width)
+      // 响应式模式下更新列数
+      this.isResponsive && (this.responsiveColumn = this.getCurrentColumn(width))
       this.updateItemStyles(container, width)
     },
     
-    // 更新每一项的标签和内容宽度样式
+    // 更新每一项的标签宽度样式
     updateItemStyles(container, totalWidth) {
-      this.$nextTick(() => {
-        const rows = container.querySelectorAll('.ant-descriptions-row')
-        let itemCount = 0
+      const rows = container.querySelectorAll('.ant-descriptions-row')
+      let itemCount = 0
 
-        rows.forEach(row => {
-          const labels = row.querySelectorAll('.ant-descriptions-item-label')
-          const contents = row.querySelectorAll('.ant-descriptions-item-content')
+      rows.forEach(row => {
+        row.querySelectorAll('.ant-descriptions-item-label').forEach(label => {
+          // 获取当前项的 span 配置，默认为 1
+          const span = this.descSettings?.[itemCount]?.span || 1
           
-          labels.forEach((label, index) => {
-            const itemConfig = this.descSettings[itemCount]
-            const span = itemConfig?.span || 1
-
-            // 计算每项总宽度和内容区域宽度
-            const eachWidth = (totalWidth / this.responsiveColumn) * span
-            const contentWidth = eachWidth - this.labelWidth
-            
-            // 设置固定标签宽度
-            this.setStyle(label, { width: `${this.labelWidth}px`, minWidth: `${this.labelWidth}px`, maxWidth: `${this.labelWidth}px` })
-            // 设置自适应内容宽度 (table-layout: auto; 自适应情况下不需要设置内容宽度)
-            // this.setStyle(contents[index], { width: `${contentWidth}px`, minWidth: `${contentWidth}px`, maxWidth: `${contentWidth}px` })
-            
-            itemCount++
+          // 计算每项总宽度和内容区域宽度
+          const eachWidth = (totalWidth / this.responsiveColumn) * span
+          const contentWidth = eachWidth - this.labelWidth
+          
+          // 设置标签的宽度样式
+          Object.assign(label.style, { 
+            width: `${this.labelWidth}px`, 
+            minWidth: `${this.labelWidth}px`, 
+            maxWidth: `${this.labelWidth}px`
           })
+
+          itemCount++
         })
       })
-    },
-    
-    // 辅助方法：设置元素样式
-    setStyle(element, styles) {
-      if (element) Object.assign(element.style, styles)
     }
   },
   
   watch: {
     // 监听响应式开关变化
     isResponsive(val) {
-      val ? this.bindResize() : this.cleanupResize()
-      this.responsiveColumn = val ? this.getCurrentColumn(window.innerWidth) : this.getColumnValue()
+      val 
+        ? (this.bindResize(), this.responsiveColumn = this.getCurrentColumn(window.innerWidth))
+        : (this.cleanupResize(), this.responsiveColumn = this.getColumnValue())
     },
+    
     // 监听列数配置变化
-    column(val) {
-      if (!this.isResponsive) {
-        this.responsiveColumn = this.getColumnValue()
-      }
+    column() {
+      !this.isResponsive && (this.responsiveColumn = this.getColumnValue())
     }
   },
   
@@ -225,7 +192,7 @@ const DescriptionsList = {
           column={this.responsiveColumn}
           {...{ attrs: { ...DESC_DEFAULT_ATTRS, ...descAttrs } }}
         >
-          {descSettings.map((descItem, key) => (
+          {descSettings?.map((descItem, key) => (
             <DescriptionsItem key={key} span={descItem.span ?? 1}>
               <span slot="label">
                 {$slots[`${descItem.props}Label`] ?? descItem.label}
@@ -247,4 +214,4 @@ DescriptionsList.install = function(Vue) {
   Vue.component('DescriptionsList', DescriptionsList)
 }
 
-export default DescriptionsList
+export default DescriptionsList

package/package.json

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