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"
                        }
                        ],
                    },
相关推荐
sinat_38424109几秒前
在有网络连接的机器上打包 electron 及其依赖项,在没有网络连接的机器上安装这些离线包
javascript·arcgis·electron
baiduopenmap13 分钟前
百度世界2024精选公开课:基于地图智能体的导航出行AI应用创新实践
前端·人工智能·百度地图
loooseFish21 分钟前
小程序webview我爱死你了 小程序webview和H5通讯
前端
小牛itbull24 分钟前
ReactPress vs VuePress vs WordPress
开发语言·javascript·reactpress
请叫我欧皇i33 分钟前
html本地离线引入vant和vue2(详细步骤)
开发语言·前端·javascript
533_35 分钟前
[vue] 深拷贝 lodash cloneDeep
前端·javascript·vue.js
guokanglun41 分钟前
空间数据存储格式GeoJSON
前端
GIS瞧葩菜1 小时前
局部修改3dtiles子模型的位置。
开发语言·javascript·ecmascript
zhang-zan1 小时前
nodejs操作selenium-webdriver
前端·javascript·selenium
ZBY520311 小时前
【Vue】 npm install amap-js-api-loader指南
javascript·vue.js·npm