element-ui 实现对话框

使用element-ui实现弹框

在这里插入图片描述

<!-- 弹窗 --><el-dialog title="New Ticket" :visible.sync="true" width="50%"> //:visible.sync="true"：一般设置一个变量来保存，true为打开,false为关闭<el-divider></el-divider><el-form :inline='true'>   // :inline='true' 表示在一行，如果到边框会换行<el-form-item label="Title" style="margin-left:100px "> //style="margin-left:100px" //和左边框的距离<el-input placeholder="简短描述你的问题..." style="width:700px"></el-input> //style="width:700px"  设置输入框的长度</el-form-item><el-form-item label="Type" style="margin-left:100px"><el-input style="width:300px"></el-input></el-form-item><el-form-item label="Assignee" style="margin-left:100px"><el-input style="width:215px"></el-input></el-form-item><el-form-item label="Description" style="margin-left:100px"><el-input type="textarea" :rows="8" style="width:650px"></el-input> //:rows="8" 设置文本域的高度，为8是可输入8行文字的意思</el-form-item></el-form> <el-uploadstyle="margin-left:100px"class="upload-demo"action="https://jsonplaceholder.typicode.com/posts/":on-preview="handlePreview":on-remove="handleRemove":before-remove="beforeRemove"multiple:on-exceed="handleExceed":file-list="fileList"><el-button size="small" type="primary">选择文件</el-button></el-upload> <span slot="footer" class="dialog-footer"><el-button type="primary" >确 定</el-button><el-button type="info" >取 消</el-button></span></el-dialog><el-button type="primary" icon="el-icon-view" @click="addTicket()">New Ticket</el-button>//此处绑定addTicket()事件，点击New Ticket调用addTicket可弹出对话框<script>
export default {data() {return {dialogVisible:false,  //设置默认为false是关闭状态input:'',}},methods: {// New ticket是弹出弹框addTicket(){this.dialogVisible=true;  //点击事件后dialogVisible赋值为true弹出对话框}},
}
</script>