update: progressloading component type

This commit is contained in:
IchliebedichZhu 2024-03-05 10:29:33 +00:00
parent a9f594fb1c
commit 4197c99b78
2 changed files with 38 additions and 24 deletions

View File

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

View File

@ -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]