总结：vue 弹窗的几总方式

前提：已经引入Modal

点击测试按钮出现弹框；

<Button type="primary"  @click="test">测试</Button>

一：简单使用Modal;

   在<template>中写html中：

把弹窗的内容写上：

  <!--test窗口-->
	<Modal v-model="isDisplay" :title="弹窗测试！" label-position="right" :scrollable="true" width="340px">
	
				<Input :placeholder="请输入！" size="large" v-model="testS"></Input>

		<div slot="footer">
			<Button type="primary"  @click="cancel2">取消</Button>
			<Button type="primary"  @click="modalSubmit">发送</Button>
		</div>
	</Modal>

在<script>中，

<script>
   data () {
       isDisplay:false
},
 test(){
this.isDisplay=true;
}

</script>

二：在<script>中，

	  test: function () {
			  var that = this;
			  this.$Modal.confirm({
				  title: 测试！,
				  cancelText:取消,
				  okText:发送,
				  onOk: function () {
					 在这可以写校验数据的逻辑
                       
                      //点击发送按钮触发的请求
					  that.$http.post("URL",{
							传入后台的参数
					  }).then(res => {
					  	获取后台返回来的结果处理
					  });
				  },
				  render: (h) => {
                         
					  return h('Input', {
                          //Input为导入的输入组件
						  props: {
							  value: that.testInput,
							  icon: "",
							  width: "440px",
							  height:"28px",
							  autofocus: true,
							  placeholder: "请输入！")
						  },  on: {//监听输入框中输入的数据
							  input: (val) => {
								  that.testInput = val;
							  }
						  },

			  			});
		  			}});
			  },

三：提示弹框

使用$Message：

this.$Message.info("提示语")；

使用$Modal
this.$Modal.warning({
   title: 测试,
   content: 测试内容,
   okText: 确认,
   closable: true
});