二维码已过期

src/components/QrCode/index.vue

@@ -41,7 +41,7 @@ const props = defineProps({
   // 过期提示内容
   disabledText: {
     type: String,
-    default: ''
+    default: '二维码已过期'
   },
 })
 
@@ -232,32 +232,37 @@ const disabledClick = () => {
 </script>
 
 <template>
-  <div v-loading="loading" :class="[prefixCls, 'relative inline-block']" :style="wrapStyle">
+  <div v-loading="loading" :class="[prefixCls, 'qrBox inline-block']" :style="wrapStyle">
     <component :is="tag" ref="wrapRef" @click="clickCode" />
     <div
       v-if="disabled"
-      :class="`${prefixCls}--disabled`"
-      class="absolute left-0 top-0 h-full w-full flex items-center justify-center"
+      class="disabledBox"
       @click="disabledClick"
     >
-      <div class="absolute left-[50%] top-[50%] font-bold">
-        <Icon :size="30" color="var(--el-color-primary)" icon="ep:refresh-right" />
-        <div>{{ disabledText }}</div>
+      <div class="disabledContent">
+        <div class="disabledText">{{ disabledText }}</div>
       </div>
     </div>
   </div>
 </template>
 
 <style lang="scss" scoped>
-// $prefix-cls: #{$namespace}-qrcode;
-
-// .#{$prefix-cls} {
-//   &--disabled {
-//     background: rgb(255 255 255 / 95%);
-
-//     & > div {
-//       transform: translate(-50%, -50%);
-//     }
-//   }
-// }
+.qrBox {
+  position: relative;
+}
+.disabledBox {
+  position: absolute;
+  top: 0;
+  left: 0;
+  background: rgb(255 255 255 / 95%);
+  height: 100%;
+  width: 100%;
+}
+.disabledContent {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
 </style>