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-upload
         style="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>