Vue.js之各类弹框提示

形式一

显示地点：界面正上方

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: "修改成功"
 });