使用v-show解决canvas最高层级影响弹窗显示问题

components/circle-progress/circle-progress.vue

@@ -11,13 +11,11 @@
     :style="{ width: canvasSize + 'px', height: canvasSize + 'px' }"
     class="progress-container"
   >
-    <cover-view z-index="0">
-      <canvas
-        :style="{ width: canvasSize + 'px', height: canvasSize + 'px' }"
-        canvas-id="progressCanvas"
-        class="progress-canvas"
-      ></canvas>
-    </cover-view>
+    <canvas
+      :style="{ width: canvasSize + 'px', height: canvasSize + 'px' }"
+      canvas-id="progressCanvas"
+      class="progress-canvas"
+    ></canvas>
 
     <view class="progress-text">
       <text class="percent">{{ progress }}%</text>

pages/future/future.vue

@@ -21,7 +21,7 @@
         <view class="donorContainer">
           <text>项目筹款情况</text>
           <view class="donorData">
-            <view class="CircleProgress">
+            <view v-show="!show" class="CircleProgress">
               <circle-progress
                 :canvas-size="65"
                 :progress="getProgressPercentage"
@@ -88,6 +88,7 @@
     <button v-if="projectDetails.state === '2'" @click="handleDonate">
       捐一笔
     </button>
+
     <u-popup v-model="show" border-radius="30" height="614rpx" mode="bottom">
       <view class="donation">
         <view class="title-row">