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

效果:

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

html 复制代码
 <el-dialog title="发布配置" custom-class="publishDialog" :visible.sync="publishDialogVisible" width="800px" :append-to-body="true"
            :before-close="publishHandleClose">
            <avue-form :option="option" v-model="publishForm" ref="publishForm" @submit="handleSubmit">
                <template slot-scope="{}" slot="layerNameLabel">
                    <span>图层别名&nbsp;&nbsp;</span>
                    <el-tooltip class="item" effect="dark" content="仅支持输入字母、数字" placement="top-start">
                        <i class="el-icon-warning"></i>
                    </el-tooltip>
                </template>
                <template slot-scope="{size}" slot="menuForm" style="text-align: right;">
                    <el-button :size="size" @click="publishHandleClose">取 消</el-button>
                    <el-button type="primary" :size="size" @click="$refs.publishForm.submit()">确 定</el-button>
                </template>
            </avue-form>

        </el-dialog>

第二步:

定义触发loading的方法

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

关闭loading的方法

loadingInstance.close();

javascript 复制代码
  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 表单插槽

效果:

第一步:slot="layerNameLabel"

html 复制代码
           <avue-form :option="option" v-model="publishForm" ref="publishForm" @submit="handleSubmit">
                <template slot-scope="{}" slot="layerNameLabel">
                    <span>图层别名&nbsp;&nbsp;</span>
                    <el-tooltip class="item" effect="dark" content="仅支持输入字母、数字" placement="top-start">
                        <i class="el-icon-warning"></i>
                    </el-tooltip>
                </template>
            </avue-form>

第二步:labelslot: true

javascript 复制代码
                   {
                        label: "图层别名",
                        prop: "layerName",
                        labelslot: true,
                        rules: [{
                            required: false,
                            message: "请输入数据库名",
                            trigger: "blur"
                        }, {
                            message: "只能输入字母、数字",
                            pattern: /^[a-zA-Z0-9]+$/,
                            trigger: "blur"
                        }
                        ],
                    },
相关推荐
cy玩具20 分钟前
点击评论详情,跳到评论页面,携带对象参数写法:
前端
customer081 小时前
【开源免费】基于SpringBoot+Vue.JS周边产品销售网站(JAVA毕业设计)
java·vue.js·spring boot·后端·spring cloud·java-ee·开源
清灵xmf1 小时前
TypeScript 类型进阶指南
javascript·typescript·泛型·t·infer
小白学大数据1 小时前
JavaScript重定向对网络爬虫的影响及处理
开发语言·javascript·数据库·爬虫
qq_390161771 小时前
防抖函数--应用场景及示例
前端·javascript
334554322 小时前
element动态表头合并表格
开发语言·javascript·ecmascript
John.liu_Test2 小时前
js下载excel示例demo
前端·javascript·excel
Yaml42 小时前
智能化健身房管理:Spring Boot与Vue的创新解决方案
前端·spring boot·后端·mysql·vue·健身房管理
PleaSure乐事2 小时前
【React.js】AntDesignPro左侧菜单栏栏目名称不显示的解决方案
前端·javascript·react.js·前端框架·webstorm·antdesignpro
哟哟耶耶2 小时前
js-将JavaScript对象或值转换为JSON字符串 JSON.stringify(this.SelectDataListCourse)
前端·javascript·json