feat: convert create-cover component to vue3

src/common/methods/QiNiu.ts

@@ -15,7 +15,7 @@ interface Options {
 }
 
 export default {
-  upload: async (file: File, options: Options, cb?: IQiniuSubscribeCb) => {
+  upload: async (file: File | Blob, options: Options, cb?: IQiniuSubscribeCb) => {
     const win = window
     let name = ''
     const suffix = file.type.split('/')[1] || 'png' // 文件后缀

src/components/business/save-download/CreateCover.vue

@@ -2,66 +2,63 @@
  * @Author: ShawnPhang
  * @Date: 2021-08-01 11:12:17
  * @Description: 前端出图 - 用于封面
- * @LastEditors: ShawnPhang <https://m.palxp.cn>
- * @LastEditTime: 2023-09-13 17:36:36
+ * @LastEditors: ShawnPhang <https://m.palxp.cn>, Jeremy Yu <https://github.com/JeremyYu-cn>
+ * @Date: 2024-03-04 18:50:00
 -->
 <template>
   <div id="cover-wrap"></div>
 </template>
 
-<script lang="ts">
-import { defineComponent, reactive, toRefs, watch, getCurrentInstance, ComponentInternalInstance } from 'vue'
-import { mapGetters, mapActions } from 'vuex'
+<script lang="ts" setup>
+import { useStore } from 'vuex'
 import html2canvas from 'html2canvas'
-import api from '@/api'
 import Qiniu from '@/common/methods/QiNiu'
+import { useSetupMapGetters } from '@/common/hooks/mapGetters'
 
-export default defineComponent({
-  props: ['modelValue'],
-  emits: ['update:modelValue'],
-  setup(props, context) {
-    const { proxy }: any = getCurrentInstance() as ComponentInternalInstance
+const store = useStore();
 
-    async function createCover(cb: any) {
-      const nowZoom = proxy?.dZoom
-      // 取消选中元素
-      proxy?.selectWidget({
-        uuid: '-1',
-      })
-      proxy?.updateZoom(100)
-      const opts = {
-        useCORS: true, // 跨域图片
-        scale: 0.2,
-      }
-      setTimeout(async () => {
-        const clonePage: HTMLElement = document.getElementById('page-design-canvas').cloneNode(true)
-        clonePage.setAttribute('id', 'clone-page')
-        document.body.appendChild(clonePage)
-        html2canvas(document.getElementById('clone-page'), opts).then((canvas: any) => {
-          canvas.toBlob(
-            async (blobObj: Blob) => {
-              const result: any = await Qiniu.upload(blobObj, { bucket: 'xp-design', prePath: 'cover/user' })
-              cb(result)
-            },
-            'image/jpeg',
-            0.15,
-          )
-          proxy?.updateZoom(nowZoom)
-          clonePage.remove()
-        })
-      }, 10)
-    }
+const { dZoom } = useSetupMapGetters(['dZoom'])
 
-    return {
-      createCover,
-    }
-  },
-  computed: {
-    ...mapGetters(['dZoom']),
-  },
-  methods: {
-    ...mapActions(['selectWidget', 'updateZoom']),
-  },
+
+// props: ['modelValue'], 
+// emits: ['update:modelValue'],
+
+async function createCover(cb: any) {
+  const nowZoom = dZoom.value
+  // 取消选中元素
+  store.dispatch('selectWidget', {
+    uuid: '-1',
+  })
+  store.dispatch('updateZoom', 100)
+
+  const opts = {
+    useCORS: true, // 跨域图片
+    scale: 0.2,
+  }
+  setTimeout(async () => {
+    const clonePage = document.getElementById('page-design-canvas')?.cloneNode(true) as HTMLElement
+    if (!clonePage) return
+    clonePage.setAttribute('id', 'clone-page')
+    document.body.appendChild(clonePage)
+    html2canvas(clonePage, opts).then((canvas) => {
+      canvas.toBlob(
+        async (blobObj) => {
+          if (blobObj) {
+            const result = await Qiniu.upload(blobObj, { bucket: 'xp-design', prePath: 'cover/user' })
+            cb(result)
+          }
+        },
+        'image/jpeg',
+        0.15,
+      )
+      store.dispatch('updateZoom', nowZoom)
+      clonePage.remove()
+    })
+  }, 10)
+}
+
+defineExpose({
+  createCover
 })
 </script>
 

src/types/global.d.ts

@@ -40,7 +40,7 @@ interface IQiniuSubscribeCb {
 interface Window {
   qiniu: {
     upload: (
-      file: File,
+      file: File | Blob,
       name: string,
       token: string,
       exObj: Record<string, any>,