组件写的一坨屎

src/App.vue

@@ -11,13 +11,13 @@ const { theme, themeOverrides } = useTheme()
 const { language } = useLanguage()
 
 const router = useRouter()
-const vipRef: any = ref(null)
+const showVipModal = ref(false)
 onMounted(() => {
     emitter.on('changeVipShow', res => {
         if (window.sessionStorage.getItem('openid')) {
             router.push('/vip')
         } else {
-            vipRef.value.init()
+            showVipModal.value = true
         }
     })
 })
@@ -35,7 +35,7 @@ onMounted(() => {
         <NaiveProvider>
             <RouterView />
 
-            <VipModal ref="vipRef" />
+            <VipModal v-model:show="showVipModal" />
         </NaiveProvider>
     </NConfigProvider>
 </template>

src/components/common/VipModal.vue

@@ -1,5 +1,5 @@
 <template>
-    <n-modal v-model:show="showModal" transform-origin="center">
+    <n-modal :show="show" @update:show="newValue => updateShow(newValue)" transform-origin="center">
         <div class="share-box">
             <img :src="imgUrl" v-if="imgUrl" alt="" class="shareImgUrl" />
             <div class="share-img relative" v-else ref="postRef">
@@ -24,49 +24,44 @@
                 <n-button type="primary" @click="down" round block size="large">保存图片</n-button>
             </div>
 
-            <n-button text class="cancel" @click.stop="showModal = false"> 取消 </n-button>
+            <n-button text class="cancel" @click.stop="updateShow(false)"> 取消 </n-button>
         </div>
     </n-modal>
 </template>
 
 <script setup lang="ts">
 import { NModal, NButton, NGradientText } from 'naive-ui'
-import { ref, computed, onMounted } from 'vue'
+import { ref, Ref, watch } from 'vue'
 import QrcodeVue from 'qrcode.vue'
 import html2canvas from 'html2canvas'
 import { useBasicLayout } from '@/hooks/useBasicLayout'
 import { fetchRedirectUrl } from '@/api'
-import { Ref } from 'vue'
-const showModal = ref(false)
 
+const props = defineProps({
+    show: {
+        type: Boolean,
+        default: false
+    }
+})
+const emit = defineEmits(['update:show'])
+
+function updateShow(val: boolean) {
+    emit('update:show', val)
+}
 const imgUrl = ref('')
 
 const shareUrl = ref('')
 const isWechat = /micromessenger/i.test(navigator.userAgent)
 
 const postRef: Ref<HTMLElement | null> = ref(null)
-function init() {
-    fetchRedirectUrl(location.origin).then(res => {
-        shareUrl.value = res as string
-        if (isWechat) {
-            window.location.href = shareUrl.value
-        } else {
-            showModal.value = true
-
-            setTimeout(() => {
-                html2canvas(postRef.value!, {
-                    useCORS: true,
-                    allowTaint: true,
-                    backgroundColor: null,
-                    scale: 3
-                }).then(canvas => {
-                    console.log(canvas)
-                    imgUrl.value = canvas.toDataURL('image/png')
-                })
-            }, 500)
+watch(
+    () => props.show,
+    val => {
+        if (val) {
+            //todo 在这里获取二维码链接
         }
-    })
-}
+    }
+)
 
 function down() {
     const tempLink = document.createElement('a')
@@ -79,12 +74,10 @@ function down() {
     tempLink.click()
     document.body.removeChild(tempLink)
     window.URL.revokeObjectURL(imgUrl.value)
-    showModal.value = false
+    updateShow(false)
 }
 
 const { isMobile } = useBasicLayout()
-
-defineExpose({ init })
 </script>
 
 <style lang="less" scoped>