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"
                        }
                        ],
                    },
相关推荐
敲厉害的燕宝9 分钟前
Pinia——Vue的Store状态管理库
前端·javascript·vue.js
Aphasia31131 分钟前
react必备JavaScript知识点(二)——类
前端·javascript
玖玖passion33 分钟前
数组转树:数据结构中的经典问题
前端
呼Lu噜39 分钟前
WPF-遵循MVVM框架创建图表的显示【保姆级】
前端·后端·wpf
珠峰下的沙砾43 分钟前
Vue3 里 CSS 深度作用选择器 :global
前端·javascript·css
航Hang*1 小时前
WEBSTORM前端 —— 第2章:CSS —— 第3节:背景属性与显示模式
前端·css·css3·html5·webstorm
wuhen_n1 小时前
CSS元素动画篇:基于当前位置的变换动画(一)
前端·css·html·css3·html5
前端_学习之路1 小时前
javaScript--数据结构和算法
javascript·数据结构·算法
拉不动的猪1 小时前
# 移动端与PC端全屏的处理
前端·javascript·面试
麦麦大数据1 小时前
vue+neo4j+flask 音乐知识图谱推荐系统
vue.js·mysql·flask·知识图谱·neo4j·推荐算法·音乐推荐