feat: 表单编辑器magic-api调用不会弹框,而是以图标闪烁的形式显示
This commit is contained in:
37
src/components/SecondDev/AjaxErrorIcon.vue
Normal file
37
src/components/SecondDev/AjaxErrorIcon.vue
Normal file
@ -0,0 +1,37 @@
|
||||
<template>
|
||||
<WarningOutlined class="alert-icon" v-show="hasAjaxError" :style="{ color: '#c00', cursor: 'pointer' }" @click.native="showHint" />
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
@keyframes opacityChange {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.3;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.alert-icon{
|
||||
animation: opacityChange 3s infinite;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script setup>
|
||||
import { WarningOutlined } from '@ant-design/icons-vue';
|
||||
import { Modal } from 'ant-design-vue';
|
||||
import useGlobalFlag from '/@/hooks/core/useGlobalFlag';
|
||||
|
||||
const globalFlag = useGlobalFlag();
|
||||
const { hasAjaxError } = globalFlag;
|
||||
|
||||
function showHint() {
|
||||
Modal.error({
|
||||
title: '接口调用错误',
|
||||
content: 'magic-api调用出现错误,为了避免干扰正常操作,这些操作不会在表单设计器中显式提示,请使用浏览器的调试工具查看具体报错信息。'
|
||||
});
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user