feat: 柱状图弹框 - 图片点击预览

components/HorizontalBar/HorizontalBar.vue

@@ -73,7 +73,8 @@ export default {
       }
       chart.setOption(that.ec.option)
       chart.on('click', event => {
-        const { preview, images, popup, data } = that.elementData.dataList
+        const { preview, images, popup, data, customRender } =
+          that.elementData.dataList
         var urls = []
         var caches = uni.getStorageSync('cacheImages')
         images &&
@@ -93,7 +94,8 @@ export default {
         } else if (popup) {
           uni.$emit('showBarDetail', {
             popupShow: true,
-            popupData: data[event.dataIndex]
+            popupData: data[event.dataIndex],
+            customRender
           })
         } else {
           that.handleEchartsClick(event)

components/ModelData/ModelData.vue

@@ -10,7 +10,17 @@
     <view class="slot-content">
       <view v-for="(val, key) in popupData" class="data-view">
         <view class="data-key ellipsis">{{ key }}</view>
-        <view class="data-val ellipsis">{{ val }}</view>
+        <template v-if="customRender[key] === 'picture'">
+          <u-image
+            :height="100"
+            mode="aspectFit"
+            :src="val"
+            crossOrigin="anonymous"
+            style="width: 100%"
+            @click="seeImage(val)"
+          ></u-image>
+        </template>
+        <view v-else class="data-val ellipsis">{{ val }}</view>
       </view>
     </view>
   </u-modal>
@@ -30,15 +40,24 @@ export default {
     popupShow: {
       type: Boolean,
       default: false
+    },
+    customRender: {
+      type: Object,
+      default: () => {}
     }
   },
   methods: {
     close() {
-      console.log(1)
       uni.$emit('showBarDetail', {
         popupShow: false,
         popupData: {}
       })
+    },
+    seeImage(url) {
+      uni.previewImage({
+        current: 0,
+        urls: [url]
+      })
     }
   }
 }

pages/index/index.vue

@@ -64,6 +64,7 @@
 			style="position: relative;z-index: 99999;"
 			:popupShow="popupShow" 
 			:popupData="popupData"
+			:customRender="customRender"
 		></ModelData>
 	</view>
 </template>
@@ -78,7 +79,8 @@
 				stickyTables: [],   // 设置了吸顶的table
 				horizontalBarHeight: 0,
 				popupShow: false,
-				popupData: {}
+				popupData: {},
+				customRender: {}
 			}
 		},
 		computed: {
@@ -154,9 +156,10 @@
 				that.horizontalBarHeight = height
 			})
 			uni.$on('showBarDetail', data => {
-				const { popupShow, popupData } = data
+				const { popupShow, popupData, customRender } = data
 				that.popupShow = popupShow
 				that.popupData = popupData
+				that.customRender = customRender
 			})
 		},
 		onHide() {