形式一

在这里插入图片描述
显示地点:界面正上方

this.$Message.info("查询");

形式二

在这里插入图片描述
显示地点:界面右侧上方

vm.$Notice.open({
   title: "卡号、姓名、电话不可为空",
   duration: 2 //n秒后消失
 });

形式三

在这里插入图片描述
显示地点:界面中心

<template>
	<Button type="primary" @click="downtemp = true" style="margin-left:60px;" size="small">下载模板</Button>
	   <Modal
	     v-model="downtemp"
	     title="提示"
	     @on-ok="downtempok"
	     @on-cancel="downtempcancel"
	     ok-text="确定"
	     cancel-text="查看模板"
	   >
	     <p style="text-align:center">
	       <Icon type="ios-checkmark-circle-outline" size="30"/>
	     </p>
	     <p style="text-align:center; font-size:30px ">下载成功</p>
	     <p style="text-align:center; font-size:10px ">成功导入数据 553 条,导入失败数据 10</p>
	     <p style="text-align:center; font-size:10px;color:orange ">下载导入失败数据</p>
	   </Modal>
</template>
<script>
export default {
  data() {
    return {
      downtemp: false
    };
  }
}
</script>

形式四

在这里插入图片描述
显示地点:界面中心

vm.$Modal.success({
   title: "提示",
   content: "修改成功"
 });
Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐