打开弹框
index.vue
vue
<template>
<div>
<el-card class="!border-none" shadow="never">
<el-button v-perms="['resources.region/add']" type="primary" @click="handleAdd">
<template #icon>
<icon name="el-icon-Plus" />
</template>
新增
</el-button>
</el-card>
<edit-popup
v-if="showEdit"
ref="editRef"
@close="showEdit = false"
/>
</div>
</template>
<script lang="ts" setup name="regionLists">
// 注意这里的EditPopup是edit-popup的名称,这里改了,上面弹框组件名称也要改
import EditPopup from './edit.vue'
const editRef = shallowRef<InstanceType<typeof EditPopup>>()
// 是否显示编辑框
const showEdit = ref(false)
// 添加
const handleAdd = async () => {
showEdit.value = true
await nextTick()
editRef.value?.open()
}
</script>
edit.vue
vue
<template>
<div class="edit-popup">
<popup
ref="popupRef"
title="测试"
:async="true"
width="550px"
>
123456
</popup>
</div>
</template>
<script lang="ts" setup name="regionEdit">
import Popup from '@/components/popup/index.vue'
const popupRef = shallowRef<InstanceType<typeof Popup>>()
//打开弹窗
const open = () => {
popupRef.value?.open()
}
defineExpose({
open
})
</script>
修改 upload 组件上传地址
组件文件路径:项目根目录\admin\src\components\upload\index.vue
修改组件下面两个地方
添加自定义上传过程中进度显示
show-progress 属性,显示上传进度,当上传Excel需要处理数据的时候,处理数据的时间似乎没有计算在内。会立马显示进度100%,然而后端并未处理完毕,会一直显示进度100%,给人BUG的感觉,还不如显示数据处理中...
修改方案:
组件文件路径:项目根目录\admin\src\components\upload\index.vue
然后父组件添加该方法: