Merge pull request #66 from JeremyYu-cn/feat-upgrade-vue3

Feat: convert common components to composition API

src/components/common/PopoverTip.vue

@@ -13,28 +13,21 @@
   </el-popover>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { defineComponent } from 'vue'
+import { defineProps } from 'vue'
 
-export default defineComponent({
+type TProps = {
-  props: {
+  title: string
-    title: {
+  width: number
-      default: '',
+  content: string
-    },
+  position: "bottom" | "auto" | "auto-start" | "auto-end" | "top" | "right" | "left" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end"
-    width: {
+  offset?: number
-      default: 0,
+}
-    },
+
-    content: {
+const { title, width, content, position } = withDefaults(defineProps<TProps>(), {
-      default: '',
+  title: '',
-    },
+  width: 0,
-    // top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end
+  content: '',
-    position: {
+  position: 'bottom'
-      default: 'bottom',
-    },
-    // offset: {
-    //   default: 0,
-    // },
-  },
-  setup() {},
 })
 </script>

src/components/common/ProgressLoading/index.vue

@@ -2,8 +2,8 @@
  * @Author: ShawnPhang
  * @Date: 2021-12-28 09:29:42
  * @Description: 百分比进度条
- * @LastEditors: ShawnPhang <site: book.palxp.com>
+ * @LastEditors: ShawnPhang <site: book.palxp.com>, Jeremy Yu <https://github.com/JeremyYu-cn>
- * @LastEditTime: 2023-07-13 23:05:29
+ * @Date: 2024-03-05 10:50:00
 -->
 <template>
   <div v-if="percent" class="mask">
@@ -16,33 +16,45 @@
   </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { defineComponent, watch } from 'vue'
+import { watch, defineProps, defineEmits } from 'vue'
 import { ElProgress } from 'element-plus'
 
-export default defineComponent({
+type TProps = {
-  components: { ElProgress },
+  percent: number
-  props: ['percent', 'text', 'cancelText', 'msg'],
+  text: string
-  emits: ['done', 'cancel'],
+  cancelText: string
-  setup(props, context) {
+  msg: string
-    watch(
+}
-      () => props.percent,
+
+type TEmits = {
+  (event: 'done'): void
+  (event: 'cancel'): void
+}
+
+const {percent, text, cancelText, msg} = defineProps<TProps>()
+
+const emit = defineEmits<TEmits>()
+
+watch(
+  () => percent,
   (num) => {
     if (num >= 100) {
       setTimeout(() => {
-            context.emit('done')
+        emit('done')
       }, 1000)
     }
   },
-    )
+)
 
-    const cancel = () => {
+const cancel = () => {
-      context.emit('cancel')
+  emit('cancel')
-    }
+}
 
-    return { cancel }
+defineExpose({
-  },
+  cancel
 })
+
 </script>
 
 <style lang="less" scoped>

src/components/common/Uploader/index.vue

@@ -2,8 +2,8 @@
  * @Author: ShawnPhang
  * @Date: 2021-08-29 18:17:13
  * @Description: 二次封装上传组件
- * @LastEditors: ShawnPhang <https://m.palxp.cn>
+ * @LastEditors: ShawnPhang <https://m.palxp.cn>, Jeremy Yu <https://github.com/JeremyYu-cn>
- * @LastEditTime: 2023-10-05 15:46:02
+ * @Date: 2024-03-05 10:50:00
 -->
 <template>
   <el-upload action="" accept="image/*" :http-request="upload" :show-file-list="false" multiple>
@@ -13,39 +13,57 @@
   </el-upload>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { defineComponent, onMounted, nextTick } from 'vue'
+import { onMounted, nextTick, defineProps, withDefaults, defineEmits } from 'vue'
-import { ElUpload } from 'element-plus'
+import { ElUpload, UploadRequestOptions } from 'element-plus'
 import Qiniu from '@/common/methods/QiNiu'
 import { getImage } from '@/common/methods/getImgDetail'
 import _config from '@/config'
 import useNotification from '@/common/methods/notification'
 
-export default defineComponent({
+type TModelData = {
-  components: { ElUpload },
+  num?: string | number
-  props: {
+  ratio?: string
-    modelValue: {},
+}
-    options: {
-      default: () => {
-        return { bucket: 'xp-design', prePath: 'user' }
-      },
-    },
-    hold: {
-      default: false, // 是否阻止上传操作，仅做文件选择
-    },
-  },
-  emits: ['done', 'update:modelValue', 'load'],
-  setup(props, context) {
-    let uploading: boolean = false // 上传状态Flag
-    let timer: any = null
 
-    let uploadList: any[] = [] // 上传队列
+type TUploadDoneData = {
-    let index: number = 0 // 当前上传的脚标
+  width: number
-    let count: number = 0 // 当前上传总数
+  height: number
+  url: string
+}
 
-    let tempSimpleRes: any = null // 单个文件上传时返回
+type TQiNiuUploadReturn = { hash: string, key: string }
 
-    onMounted(async () => {
+type TProps = {
+  modelValue: TModelData
+  options: { bucket: string, prePath: string }
+  hold: boolean
+}
+
+type TEmits = {
+  (event: 'done', data: TUploadDoneData): void
+  (event: 'update:modelValue', data: TModelData): void
+  (event: 'load', data: File): void
+}
+
+const props = withDefaults(defineProps<TProps>(), {
+  modelValue: () => ({}),
+  options: () => ({ bucket: 'xp-design', prePath: 'user' }),
+  hold: false
+})
+
+const emit = defineEmits<TEmits>()
+
+let uploading: boolean = false // 上传状态Flag
+let timer: number
+
+let uploadList: File[] = [] // 上传队列
+let index: number = 0 // 当前上传的脚标
+let count: number = 0 // 当前上传总数
+
+let tempSimpleRes: TQiNiuUploadReturn | null // 单个文件上传时返回
+
+onMounted(async () => {
   await nextTick()
   setTimeout(() => {
     // 加载七牛上传插件
@@ -53,11 +71,11 @@ export default defineComponent({
     link_element.setAttribute('src', _config.QINIUYUN_PLUGIN)
     document.head.appendChild(link_element)
   }, 1000)
-    })
+})
 
-    const upload = ({ file }: any) => {
+const upload = async ({ file }: UploadRequestOptions) => {
   if (props.hold) {
-        context.emit('load', file)
+    emit('load', file)
     return
   }
   uploadList.push(file)
@@ -65,18 +83,20 @@ export default defineComponent({
   count++
   updatePercent(null)
   uploadQueue()
-    }
+}
-    // 上传队列
+
-    const uploadQueue = async () => {
+// 上传队列
+const uploadQueue = async () => {
   if (!uploading) {
     uploading = true
     const file = uploadList[0]
     if (file) {
       if (file.size <= 1024 * 1024) {
         tempSimpleRes = await qiNiuUpload(file) // 队列有文件，执行上传
-            const { width, height }: any = await getImage(file)
+        console.log("tempSimpleRes", tempSimpleRes)
+        const { width, height } = await getImage(file)
         useNotification('上传成功', '公共测试账户，上传请注意保护隐私哦!', { position: 'bottom-left' })
-            context.emit('done', { width, height, url: _config.IMG_URL + tempSimpleRes.key }) // 单个文件进行响应
+        emit('done', { width, height, url: _config.IMG_URL + tempSimpleRes?.key }) // 单个文件进行响应
       } else useNotification('爱护小水管', '请上传小于 1M 的图片哦!', { type: 'error', position: 'bottom-left' })
       uploading = false
       handleRemove() // 移除已上传文件
@@ -91,37 +111,37 @@ export default defineComponent({
       }, 3000)
     }
   }
-    }
+}
-    const qiNiuUpload = async (file: File) => {
+
+const qiNiuUpload = async (file: File): Promise<null | TQiNiuUploadReturn> => {
   updatePercent(0)
-      return new Promise(async (resolve: Function) => {
+  return new Promise(async (resolve) => {
     if (props.hold) {
-          context.emit('load', file)
+      emit('load', file)
-          resolve()
+      resolve(null)
     } else {
-          const result: any = await Qiniu.upload(file, props.options, (res: Type.Object) => {
+      const result = await Qiniu.upload(file, props.options, (res: Type.Object) => {
         updatePercent(res.total.percent)
       })
       resolve(result)
     }
   })
-    }
+}
-    // 更新视图
+
-    const updatePercent = (p?: number | null) => {
+// 更新视图
+const updatePercent = (p?: number | null) => {
   const num = typeof p === 'number' ? String(p) : p
   const percent = { ...props.modelValue }
   percent.num = num ? Number(num).toFixed(0) : percent.num
   percent.ratio = count ? `${index} / ${count}` : ''
-      context.emit('update:modelValue', percent)
+  emit('update:modelValue', percent)
-    }
+}
-    const handleRemove = () => {
+const handleRemove = () => {
   uploadList.length > 0 && uploadList.splice(0, 1)
-    }
+}
 
-    return {
+defineExpose({
   upload,
-    }
-  },
 })
 </script>
 

src/components/modules/index.ts

@@ -5,6 +5,8 @@
  * @LastEditors: ShawnPhang
  * @LastEditTime: 2022-04-08 10:28:47
  */
+import { App } from "vue"
+
 function capitalizeFirstLetter(string: string) {
   return string.charAt(0).toUpperCase() + string.slice(1)
 }
@@ -18,7 +20,7 @@ const regex = RegExp('.*^(?!.*?(' + exclude.join('|') + ')).*\\.vue$')
 
 const requireComponent = import.meta.glob('./**/*.vue', { eager: true })
 
-function guide(Vue: Type.Object) {
+function guide(Vue: App) {
   for (const fileName in requireComponent) {
     if (regex.test(fileName)) {
       const componentConfig = requireComponent[fileName]

src/types/global.d.ts

@@ -34,6 +34,7 @@ interface IQiniuSubscribeCb {
   (result: {
     total: { percent: number }
     key: string
+    hash: string
   }): void
 }