refactor: ♻️ 超时功能和提示增加参数形式

dev/src/views/ui/qrcode.vue

@@ -1,7 +1,4 @@
 <template>
-  <button @click="handleChangeValue('哈哈哈哈')">测试改变 value的值</button>
-  <button @click="handleRefresh(1000)">测试改变 timeout的值为1000</button>
-  <button @click="handleRefresh(0)">测试改变 timeout的值为0</button>
   <div style="height: 100%">
     <XQrcode
       :value="dataUrl"
@@ -21,17 +18,13 @@
 
   const dataUrl = ref('二维码数据');
 
-  const timeoutValue = ref(100);
+  const timeoutValue = ref<number>(3000000);
 
   const onDataUrlChange = (val: string) => {
     dataUrl.value = val;
   };
 
-  const handleChangeValue = (val: string) => {
-    dataUrl.value = val;
-  };
-
-  const handleRefresh = (time: number = 1000) => {
+  const handleRefresh = (time: number = 3000000) => {
     timeoutValue.value = time;
   };
 </script>

packages/ui/src/components/qrcode/Qrcode.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="x-qrcode" ref="qrcodeRef">
-    <img class="x-qrcode__qrcode" v-bind="attrs" :src="dataUrlRef" />
+    <img class="x-qrcode__qrcode" v-bind="attrs" :src="qrcodeValue" />
 
-    <div class="x-qrcode__mask" v-if="!props.timeout">
+    <div class="x-qrcode__mask" v-if="qrcodeValue && isTimeout">
       <slot name="logo">
         <div class="x-qrcode__logo" @click="handleRefresh">
           <XIcon :icon="Refresh" :size="40"></XIcon>
@@ -10,17 +10,17 @@
         </div>
       </slot>
       <slot name="tip">
-        <p class="x-qrcode__tip">二维码已失效请刷新居重试</p>
+        <p class="x-qrcode__tip">{{ props.tip }}</p>
       </slot>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-  import { ref, watch, useAttrs } from 'vue';
+  import { ref, watch, useAttrs, onMounted } from 'vue';
   import { XIcon } from '../icon';
   import { Refresh } from '@vtj/icons';
-  import { qrcodeProps, type QrcodeEmits } from './types';
+  import { qrcodeProps, type qrcodeEmits } from './types';
   import QRCode from 'qrcode';
 
   defineOptions({
@@ -28,11 +28,29 @@
   });
 
   const props = defineProps(qrcodeProps);
-  const emit = defineEmits<QrcodeEmits>();
+  const emit = defineEmits<qrcodeEmits>();
   const attrs = useAttrs();
 
-  // ---
-  const dataUrlRef = ref<string>();
+  const isTimeout = ref<boolean>(false);
+  // 计时器 判断是否超时
+  const timer = () => {
+    isTimeout.value = false;
+    setTimeout(() => {
+      isTimeout.value = true;
+    }, props.timeout / 1000);
+  };
+
+  onMounted(() => {
+    timer();
+  });
+
+  const handleRefresh = () => {
+    emit('refresh');
+    timer();
+  };
+
+  // 保存 qrcode 的值 value  props.value
+  const qrcodeValue = ref<string>();
   const toDataURL = async () => {
     const { quality, value, ...rest } = props;
     const typeValue = typeof value === 'function' ? await value() : value;
@@ -42,18 +60,13 @@
       Object.assign(rest, quality == null || { renderOptions: { quality } })
     )
       .then((dataUrl) => {
-        dataUrlRef.value = dataUrl;
-        emit('change', dataUrl);
+        qrcodeValue.value = dataUrl;
       })
       .catch((err: unknown) => {
         console.log(err);
       });
   };
 
-  const handleRefresh = () => {
-    emit('refresh');
-  };
-
   watch(props, toDataURL, { immediate: true });
 
   // 组件

packages/ui/src/components/qrcode/types.ts

@@ -118,12 +118,16 @@ export const qrcodeProps = {
   timeout: {
     type: Number,
     default: 0
+  },
+  // tip
+  tip: {
+    type: String,
+    default: '二维码已失效请刷新居重试'
   }
 };
 
 export type qrcodeProps = ComponentPropsType<typeof qrcodeProps>;
 
-export type QrcodeEmits = {
-  change: [dataUrl: string];
+export type qrcodeEmits = {
   refresh: [];
 };