1.双层弹窗,上图效果
2.单层弹窗,上图效果
3.系统自带的notification弹窗,上图效果![](https://i-blog.csdnimg.cn/direct/9cd43eb23aa44be48862cfbac6274d44.png)
3.1代码实现
function click(){
notification.warning({
message: '温馨提醒',
description: '这是一段描述' || '',
duration: 0,
});
}
4.弹窗什么支持可修改
title、content、helpMessage、label
centered: true,//TODO 属性没效果,我也不知道为什么(应该支持取消、确认按钮居中)
5.代码实现
5.1智能预审按钮
<div class="footer-style">
<div style="margin: 0 auto">
<a-button @click="handleCheckPre" :disabled="isDisabled" class="mr-2 znys-button"> 智能预审 </a-button>
</div>
</div>
//智能预审
const handleCheckPre = () => {
openCheckPreModal(true, {
checkPreList
})
}
5.2智能预审调用弹出窗
<template
<CheckPreModal @register="registerModal"></CheckPreModal>
</template>
<script lang="ts" setup>
import { useModal } from '/@/components/Modal';
import CheckPreModal from '../../prereview/CheckPreModal.vue';
const [registerModal, { openModal: openCheckPreModal }] = useModal();
//智能预审
const handleCheckPre = () => {
openCheckPreModal(true, {
checkPreList
})
}
</script>
5.3智能预审弹窗实现
<template>
<BasicModal
v-bind="$attrs"
@register="register"
title="智能预审"
:helpMessage="['选择预审规则后点击确认,进行预审']"
@ok="handleCheckPre"
@cancel="closeModal"
>
<a-form :label-col="{ span: 5 }" :wrapper-col="{ span: 13 }">
<a-form-item label="选择预审规则">
<a-select
v-model:value="selectedValue"
style="width: 330px;"
>
<a-select-option v-for="item in checkPreList" :key="item.ruleCode" :value="item.ruleCode">
{{ item.ruleDesc }}
</a-select-option>
</a-select>
</a-form-item>
</a-form>
</BasicModal>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { getCheckPreInfoApi } from './checkPre.api';
import { useMessage } from '/@/hooks/web/useMessage';
import { BasicModal, useModalInner } from '/@/components/Modal';
let checkPreList = [];
const { createWarningModal, createMessage } = useMessage();
const selectedValue = ref(checkPreList.length > 0 ? checkPreList[0].value : null);
const [register, { closeModal }] = useModalInner(async (data) => {
checkPreList = data.checkPreList;
});
const handleCheckPre = () => {
if (!selectedValue.value) {
createMessage.warn('预审规则不能为空');
return;
}
getCheckPreInfoApi({ruleCode: selectedValue.value}).then((res)=>{
// closeModal(); //上一层是否关闭
});
}
</script>
<style scoped lang="less">
</style>
5.4二层弹窗提示实现
<template>
<BasicModal
v-bind="$attrs"
@register="register"
title="智能预审"
:helpMessage="['选择预审规则后点击确认,进行预审']"
@ok="handleCheckPre"
@cancel="closeModal"
>
<a-form :label-col="{ span: 5 }" :wrapper-col="{ span: 13 }">
<a-form-item label="选择预审规则">
<a-select
v-model:value="selectedValue"
style="width: 330px;"
>
<a-select-option v-for="item in checkPreList" :key="item.ruleCode" :value="item.ruleCode">
{{ item.ruleDesc }}
</a-select-option>
</a-select>
</a-form-item>
</a-form>
</BasicModal>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { getCheckPreInfoApi } from './checkPre.api';
import { useMessage } from '/@/hooks/web/useMessage';
import { BasicModal, useModalInner } from '/@/components/Modal';
let checkPreList = [];
const { createWarningModal, createMessage } = useMessage();
const selectedValue = ref(checkPreList.length > 0 ? checkPreList[0].value : null);
const [register, { closeModal }] = useModalInner(async (data) => {
checkPreList = data.checkPreList;
});
const handleCheckPre = () => {
if (!selectedValue.value) {
createMessage.warn('预审规则不能为空');
return;
}
getCheckPreInfoApi({ruleCode: selectedValue.value}).then((res)=>{
// closeModal(); //上一层是否关闭
createWarningModal({
title: '提示',
centered: true,//TODO 没效果
content: res,
style: {
width: '330px',
},
});
});
}
</script>
<style scoped lang="less">
</style>
二次弹窗中提示框单独实现
<template>
<a-button @click="clickTip()" >弹出提示框</a-button>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { getCheckPreInfoApi } from './checkPre.api';
import { useMessage } from '/@/hooks/web/useMessage';
const content = '可实现动态效果';
const { createWarningModal } = useMessage();
function clickTip() {
createWarningModal({
title: '提示',
centered: true,//TODO 没效果
content: '这是文本实现',//content: content,可实现动态效果
style: {
width: '330px',
},
});
}
</script>
<style scoped lang="less">
</style>
5.5a-collapse的使用
<template>
<a-collapse v-model:activeKey="activeKey" :bordered="true">
<a-collapse-panel key="xxlr" header="信息录入" style="font-size: 18px; background-color: white;">
<a-tab></a-tab>
</a-collapse-panel>
</a-collapse>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const activeKey = ref(['xxlr']);
</script>
5.6a-select的使用
<template>
<a-select
v-model:value="selectedValue"
style="width: 330px;"
>
<a-select-option v-for="item in checkPreList" :key="item.ruleCode" :value="item.ruleCode">
{{ item.ruleDesc }}
</a-select-option>
</a-select>
</template>
<script lang="ts" setup>
let checkPreList = [];
</script>
7.BasicModal的使用
<template>
<BasicModal
v-bind="$attrs"
@register="register"
title="智能预审"
:helpMessage="['选择预审规则后点击确认,进行预审']"
@ok="handleCheckPre"
@cancel="closeModal"
>
<span>可以参考智能预审</span>
</BasicModal>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { useMessage } from '/@/hooks/web/useMessage';
import { BasicModal, useModalInner } from '/@/components/Modal';
let checkPreList = [];
const { createMessage } = useMessage();
const [register, { closeModal }] = useModalInner(async (data) => {
checkPreList = data.checkPreList;
});
const handleCheckPre = () => {
if (false) {
createMessage.warn('预审规则不能为空');
return;
}
}
</script>
<style scoped lang="less">
</style>