vue dialog的设置

vue的dialog相关设置

1.自定义dialog的内容

1.1dialog 使用的是 elementUI 框架，一般是通过按钮进行触发，所以，首先要先声明一个按钮：

<el-buttton type="primary" size="small" @click="">导入</el-button>

这里声明了一个按钮，，类型是基础类型，尺寸是小，并且绑定了鼠标的点击事件，

1.2 定义dialog

<el-dialog title="导入学生" :visible.sync="uploadVisible" size="tiny">
             <el-upload class="upload_student"
                        ref="upload"
                        action="/api/student/upload"
                        :on-preview="handlePreview"
                        :on-remove="handleRemove"
                        :file-list="fileList"
                        :auto-upload="false">
               <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
               <el-button style="margin-left: 10px" size="small" type="success" @click="submitUpload">导入学生信息
               </el-button>
               <div slot="tip" class="el_upload_tip">请导入标准格式的excel文件</div>
             </el-upload>
           </el-dialog>

这里，title是dialog弹出后标题， :visible.sync=”uploadVisible” ，是一个布尔类型的方法，uploadVisible = true 表示可见，false表示不可见，所以，在按钮的点击事件中，我们设置 uploadVisible为true，就可以使 这个dialog弹出来；

sync是指，弹出的dialog的右上角的 x，如果 :visible=”uploadVisible” 不带sync的话， 那么右上角的 x 点击无效，如果 带 sync 则点击右上角的 x可以关闭dialog dialog可以在其中嵌套其他的组件，以上的例子，是在dialog中嵌套了上传组件。