mirror of
https://github.com/palxiao/poster-design.git
synced 2025-07-15 16:02:19 +08:00
update: progressloading component type
This commit is contained in:
parent
a9f594fb1c
commit
4197c99b78
@ -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>
|
||||
|
@ -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]
|
||||
|
Loading…
x
Reference in New Issue
Block a user