Vue+Element-Ui弹出框的搭建及使用-Peak-Gao

这个弹出层是用<el-dialog>标签,如果这个弹出框是常用的话,那你就把这个单独写到一个组件里,上代码

第一种

按钮

需要在按钮上加一个点击事件,如:

1.  @click="dialogFormVisible = true" 			这种是直接点击就打开

		<el-button type="success" size="small" @click="dialogFormVisible = true">新增</el-button>
        <el-button type="primary" size="small" @click="update">修改</el-button>
        <el-button type="danger" size="small" @click="del">删除</el-button>

弹出层

 <el-dialog
        title="添加"
        :visible.sync="dialogFormVisible"	//这里需要和上面的按钮绑定
        :show-close="showClo"	//不显示x关闭
        @close="clear">  //清空输入框的数据
//这里写你的前端代码

<div slot="footer" class="dialog-footer">
		//这里也需要绑定一下由于你点击取消的时候让这个框不显示
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="onSubmit">确 定</el-button>
        </div>
 </el-dialog>

script

<script>
export default {
//如果这个是单独的组件,外部需要用的时候,在这里需要把他暴露出去
	name:"dialog",
data(){
		return{
			dialogFormVisible: false
		},
		methods:{
			onSubmit(){
     			//ajax发送成功的是响应的时候也需要要关闭弹出层
     			this.dialogFormVisible = false
		}
	}
}
</script>

第二种

按钮

2.  @click="update"    点击这个放法执行

<el-button type="primary" size="small" @click="update">修改</el-button>

弹出层

<el-dialog
        title="修改"
        :visible.sync="dialogFormEdit"
        :show-close="showClo">
        //这里需要回显的话千万别加@close="clear"
        //这个也是在methods中写的clear方法
		<div slot="footer" class="dialog-footer">
          <el-button @click="cancel">取 消</el-button>
          <el-button type="primary" @click="edit">确 定</el-button>
        </div>
</el-dialog>        

script

<script>
export default {
//如果这个是单独的组件,外部需要用的时候,在这里需要把他暴露出去
	name:"dialog",
data(){
		return{
			dialogFormEdit: false
		},
		methods:{
		//修改按钮
		update(){
		this.dialogFormEdit= true
			},
			//提交按钮
			edit(){
     			//ajax发送成功的是响应的时候也需要要关闭弹出层
     			this.dialogFormEdit= false
		},
		//点击取消需要关闭
		cancel(){
			this.dialogFormEdit= false
		}
	}
}
</script>