Vue.js-加载服务-元素用户界面

Question

I would like to use the loading service of Element UI framework. I read the documentation but I have hard time to figure out how to use it.

Let's take an example: how to display the loading only in the dialog when pressing on the confirm button of this dialog

https://jsfiddle.net/5xmoxwsy/1/

Thank you

Answer 1

Add ref to dialog:

 ref="dialog"

Bind click to method in vm:

 @click="Confirm"

Methods:

methods: {
    Confirm() {
        var self = this;
        var loadingInstance = window.ELEMENT.Loading.service(
        {
            target: self.$refs.dialog.$el.querySelector('.el-dialog')
        });
        setTimeout(function(){
            self.dialogFormVisible = false;
            loadingInstance.close();
        },1000);
    }
}

jsfiddle