el-dialog 添加loading;avue-form 表单插槽

效果: 

el-dialog 添加loading;avue-form 表单插槽_第1张图片

 第一步:custom-class="publishDialog" 新起一个类名

 
            
                
                
            

        

第二步:

定义触发loading的方法

 let loadingInstance = Loading.service(
                {
                    target: '.publishDialog', (dialog的新类名   也就loading遮罩的dom)
                    lock: true,
                    text: '加载中',
                }
);

关闭loading的方法

loadingInstance.close();

  handleSubmit(form, done) {
            let loadingInstance = Loading.service(
                {
                    target: '.publishDialog',
                    lock: true,
                    text: '加载中',
                }
            );
            release().then(res => {
                if (res.data.code == 200) {
                    this.$message({
                        type: 'success',
                        message: '发布成功!'
                    });
                    loadingInstance.close();
                    this.publishDialogVisible = false
                    done()
                } else {
                    loadingInstance.close();
                }
            })
        },

补充:avue-form 表单插槽

效果:el-dialog 添加loading;avue-form 表单插槽_第2张图片

 第一步:slot="layerNameLabel"

           
                
            

第二步:labelslot: true

                   {
                        label: "图层别名",
                        prop: "layerName",
                        labelslot: true,
                        rules: [{
                            required: false,
                            message: "请输入数据库名",
                            trigger: "blur"
                        }, {
                            message: "只能输入字母、数字",
                            pattern: /^[a-zA-Z0-9]+$/,
                            trigger: "blur"
                        }
                        ],
                    },

你可能感兴趣的:(avue,element,vue.js,前端,javascript)