一般表单提交时,点击提交后,整个表单都应该处于不可操作的状态,为了用户体验良好,我们基本上会在表单的中间位置显示loading 等提示字样。(学习实践记录)
先创建一个表单提交的对话框(例子来源于element ui官网)
<el-dialog title="收货地址" :visible.sync="dialogFormVisible" class="submit-test-dialog"> <el-form :model="form"> <el-form-item label="活动名称" :label-width="formLabelWidth"> <el-input v-model="form.name" autocomplete="off"></el-input> </el-form-item> <el-form-item label="活动区域" :label-width="formLabelWidth"> <el-select v-model="form.region" placeholder="请选择活动区域"> <el-option label="区域一" value="shanghai"></el-option> <el-option label="区域二" value="beijing"></el-option> </el-select> </el-form-item> </el-form> <div slot="footer" class="dialog-footer"> <el-button @click="dialogFormVisible = false">取 消</el-button> <el-button type="primary" @click="submit">确 定</el-button> </div> </el-dialog>
点击确定后校验表单内容,然后提交表单内容给后端,同时表单对话框中出现“提交中”等字样,实现方式如下。
submit(){ const loadingObj = this.$loading({ lock: true, text: '提交中...', spinner: 'el-icon-loading', background: 'rgba(0, 0, 0, 0.7)', target: document.querySelector('.submit-test-dialog') }); //后端返回结果后,结束loadingObj,即loadingObj.close(); }
属性含义可以element ui官网中查找