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

祝你今天也快乐2023-07-19 22:50

效果:

第一步：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"
                        }
                        ],
                    },