# 反馈
# 一、Message
全局提示
方法名 | 描述 | 用法 |
---|
success | 成功 提示框 | message.success(content, [duration], onClose) |
error | 错误 提示框 | message.error(content, [duration], onClose) |
info | 信息 提示框 | message.info(content, [duration], onClose) |
warning | 警告 提示框 | message.warning(content, [duration], onClose) |
warn | 警告 提示框 | message.warn(content, [duration], onClose) |
loading | 加载 提示框 | message.loading(content, [duration], onClose) |
参数 | 描述 | 类型 | 默认值 |
---|
content | 提示内容 | string | |
duration | 自动关闭的延时,单位秒。设为 0 时不自动关闭。 | number | 3 |
onClose | 关闭时触发的回调函数 | Function | |
<template>
<div style="margin:50px">
<a-button type="primary" @click="info">全局提示</a-button>
</div>
</template>
<script>
import { message } from "ant-design-vue";
export default {
setup() {
const info = () => {
message.success("全局提示框");
message.success("全局提示框",1);
message.success("全局提示框",1,()=>{
console.log('提示框关闭 回调函数');
});
};
return {
info
};
}
};
</script>
# 二、Modal
对话框
# 1、Modal
参数
参数 | 描述 | 类型 | 默认值 |
---|
visible(v-model) | 对话框是否可见 | boolean | |
width | 宽度 | string、number | 520 |
centered | 垂直居中展示 Modal | Boolean | false |
title | 标题 | string、slot | |
mask | 是否展示遮罩 | Boolean | true |
wrapClassName | 对话框外层容器的类名 | string | |
okText | 确认按钮文字 | string、slot | 确定 |
okType | 确认按钮类型 | string | primary |
cancelText | 取消按钮文字 | string、slot | 取消 |
footer | 底部内容,当不需要默认底部按钮时,可以设为 null | string、slot | 确定取消按钮 |
<template>
<div style="margin-bottom: 16px">
<a-button type="primary" @click="addShow"> 添加 </a-button>
</div>
<a-modal
v-model:visible="addModal"
width="100%"
centered
title="添加"
:mask="mask"
wrapClassName="full-modal"
okText="确定"
okType="primary"
cancelText="取消"
:footer="null"
>
<p>欧阳克</p>
<p>朱天蓬</p>
<p>灭绝师太</p>
</a-modal>
</template>
<script>
import { ref } from "vue";
export default {
setup(){
const addModal = ref(false);
const addShow = () => {
addModal.value = true;
};
return {
addModal,
addShow,
mask: false,
}
}
};
</script>
<style lang="scss">
.full-modal {
.ant-modal {
max-width: 100%;
top: 0;
padding-bottom: 0;
margin: 0;
}
.ant-modal-content {
display: flex;
flex-direction: column;
height: calc(100vh);
}
.ant-modal-body {
flex: 1;
}
}
</style>
# 2、Modal
事件
事件名称 | 描述 | 回调参数 |
---|
ok | 点击确定回调 | function(e) |
cancel | 点击遮罩层或右上角叉或取消按钮的回调 | function(e) |
<template>
<div style="margin-bottom: 16px">
<a-button type="primary" @click="addShow"> 添加 </a-button>
</div>
<a-modal
v-model:visible="addModal"
width="100%"
title="添加"
okText="确定"
okType="primary"
@ok="addOk"
@cancel="addCancel"
>
<p>欧阳克</p>
<p>朱天蓬</p>
<p>灭绝师太</p>
</a-modal>
</template>
<script>
import { ref } from "vue";
export default {
setup(){
const addModal = ref(false);
const addShow = () => {
addModal.value = true;
};
const addOk = (e) => {
console.log(e);
};
const addCancel = (e) => {
console.log(e);
};
return {
addModal,
addShow,
addOk,
addCancel
}
}
};
</script>
# 3、Modal
方法
方法名 | 描述 | 用法 |
---|
success | 成功 | Modal.success(config) |
error | 错误 | Modal.error(config) |
info | 信息 | Modal.info(config) |
warning | 警告 | Modal.warning(config) |
confirm | 提交 | Modal.confirm(config) |
destroy | 销毁Modal | Modal.info(config).destroy() |
destroyAll | 销毁所有Modal | Modal.destroyAll() |
方法参数 | 描述 | 类型 | 默认值 |
---|
title | 标题 | string、vNode、function(h) | |
content | 内容 | string、vNode、function(h) | |
width | 宽度 | string、number | 416 |
mask | 是否展示遮罩 | Boolean | true |
okText | 确认按钮文字 | string | 确定 |
okType | 确认按钮类型 | string | primary |
closable | 是否显示右上角的关闭按钮 | boolean | false |
onOk | 点击确定回调,参数为关闭函数,返回 promise 时 resolve 后自动关闭 | function | |
onCancel | 取消回调,参数为关闭函数,返回 promise 时 resolve 后自动关闭 | function | |
<template>
<div style="margin-bottom: 16px">
<a-button type="primary" @click="addShow"> 添加 </a-button>
</div>
<a-modal
v-model:visible="addModal"
width="100%"
title="添加"
okText="确定"
okType="primary"
@ok="addOk"
@cancel="addCancel"
>
<p>欧阳克</p>
<p>朱天蓬</p>
<p>灭绝师太</p>
</a-modal>
</template>
<script>
import { ref } from "vue";
import { Modal } from "ant-design-vue";
export default {
setup() {
const addModal = ref(false);
const addShow = () => {
addModal.value = true;
};
const addOk = (e) => {
Modal.info({
title: "修改的标题",
content: "修改的内容",
width: 500,
mask: false,
okText: "确定",
okType: "primary",
closable: true,
onOk(e){
console.log(e);
}
});
Modal.success();
Modal.error();
Modal.warning();
Modal.confirm();
const mo = Modal.confirm({
title: "修改的标题",
content: "修改的内容",
width: 500,
mask: false,
okText: "确定",
okType: "primary",
closable: true,
onOk(e) {
console.log(e);
}
});
mo.update({
title: "修改的标题1",
content: "修改的内容1",
});
mo.destroy()
Modal.destroyAll()
};
const addCancel = (e) => {
console.log(e);
};
return {
addModal,
addShow,
addOk,
addCancel
}
}
};
</script>