element-ui#Loading JavaScript Examples

The following examples show how to use element-ui#Loading. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: ui.js    From TarsBenchmark with BSD 3-Clause "New" or "Revised" License 6 votes vote down vote up 
UILoading.prototype.show = function (text) {
  if (this.loading) {
    this.hide();
  }

  let loading = Loading.service({
    fullscreen: true,
    text: text || "Loading",
    background: 'rgba(0,0,0,0)',
  });

  this.loading = loading;
  return this;
};
Example #2
Source File: index.js    From ffexplorer with MIT License 6 votes vote down vote up 
document.addEventListener('DOMContentLoaded', () => {
    __webpack_public_path__ = FF_EXPLORER_DATA.path.root + 'administrator/components/com_ffexplorer/assets/explorer/dist/';

    locale.use(lang)

    Vue.use(Select);
    Vue.use(Option);
    Vue.use(Input);
    Vue.use(Button);
    Vue.use(Dialog);
    Vue.use(Upload);
    Vue.use(Pagination);
    Vue.use(Loading.directive);

    Vue.prototype.$loading = Loading.service;
    Vue.prototype.$msgbox = MessageBox;
    Vue.prototype.$alert = MessageBox.alert;
    Vue.prototype.$confirm = MessageBox.confirm;
    Vue.prototype.$prompt = MessageBox.prompt;
    Vue.prototype.$message = Message;

    Vue.prototype.$t = function(text) {
        return translate(text);
    }

    Vue.prototype.$ajax = function(options, method) {
        const $ = jQuery;
        const {path, params} = FF_EXPLORER_DATA;
        const url = path.ajax;
    
        return new Promise((resolve, reject) => {
            $.ajax({
                method: method ? method : 'post',
                url: url,
                dataType: 'json',
                data: $.extend({}, params, options),
            })
            .done(response => {
                resolve(response);
            })
            .fail(error => {
                reject(error);
            });
        });
    }

    new Vue({
        store,
        render: h => h(App)
    }).$mount('#explorer-app');
});
Example #3
Source File: http.js    From fzu-cpDailySign with MIT License 6 votes vote down vote up 
// 请求拦截器
axios.interceptors.request.use(
    config => {
        if(config.url.startsWith('http') || config.url.startsWith('/cors')){ // 外部域请求
            return config
        }
        loadingInstance = Loading.service({
            text: '请稍后...',
            target: '#main-content'
        })
        return config
    },
    error => {
        console.log(error)
        return Promise.reject(error)
    }
)
Example #4
Source File: main.js    From goindex-theme-acrou with MIT License 5 votes vote down vote up 
Vue.use(Loading);
Example #5
Source File: element.js    From wl-admin with MIT License 5 votes vote down vote up 
Vue.prototype.$loading = Loading.service;
Example #6
Source File: element.js    From wl-admin with MIT License 5 votes vote down vote up 
Vue.use(Loading.directive);
Example #7
Source File: main.js    From gdrive-index with MIT License 5 votes vote down vote up 
Vue.use(Loading);
Example #8
Source File: main.js    From study-chain with MIT License 5 votes vote down vote up 
Vue.use(Loading.directive);
Example #9
Source File: main.js    From gindex-v4 with GNU General Public License v3.0 5 votes vote down vote up 
Vue.use(Loading);
Example #10
Source File: element.js    From wl with Apache License 2.0 5 votes vote down vote up 
Vue.use(Loading.directive);
Example #11
Source File: element.js    From wl with Apache License 2.0 5 votes vote down vote up 
Vue.prototype.$loading = Loading.service;
Example #12
Source File: vab.js    From vue-admin-better-template with Mozilla Public License 2.0 4 votes vote down vote up 
install = (Vue, opts = {}) => {
  /* 全局accessToken */
  Vue.prototype.$baseAccessToken = () => {
    return accessToken || getAccessToken()
  }
  /* 全局标题 */
  Vue.prototype.$baseTitle = (() => {
    return title
  })()
  /* 全局加载层 */
  Vue.prototype.$baseLoading = (index, text) => {
    let loading
    if (!index) {
      loading = Loading.service({
        lock: true,
        text: text || loadingText,
        background: 'hsla(0,0%,100%,.8)',
      })
    } else {
      loading = Loading.service({
        lock: true,
        text: text || loadingText,
        spinner: 'vab-loading-type' + index,
        background: 'hsla(0,0%,100%,.8)',
      })
    }
    return loading
  }
  /* 全局多彩加载层 */
  Vue.prototype.$baseColorfullLoading = (index, text) => {
    let loading
    if (!index) {
      loading = Loading.service({
        lock: true,
        text: text || loadingText,
        spinner: 'dots-loader',
        background: 'hsla(0,0%,100%,.8)',
      })
    } else {
      switch (index) {
        case 1:
          index = 'dots'
          break
        case 2:
          index = 'gauge'
          break
        case 3:
          index = 'inner-circles'
          break
        case 4:
          index = 'plus'
          break
      }
      loading = Loading.service({
        lock: true,
        text: text || loadingText,
        spinner: index + '-loader',
        background: 'hsla(0,0%,100%,.8)',
      })
    }
    return loading
  }
  /* 全局Message */
  Vue.prototype.$baseMessage = (message, type) => {
    Message({
      offset: 60,
      showClose: true,
      message: message,
      type: type,
      dangerouslyUseHTMLString: true,
      duration: messageDuration,
    })
  }

  /* 全局Alert */
  Vue.prototype.$baseAlert = (content, title, callback) => {
    MessageBox.alert(content, title || '温馨提示', {
      confirmButtonText: '确定',
      dangerouslyUseHTMLString: true,
      callback: (action) => {
        if (callback) {
          callback()
        }
      },
    })
  }

  /* 全局Confirm */
  Vue.prototype.$baseConfirm = (content, title, callback1, callback2) => {
    MessageBox.confirm(content, title || '温馨提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      closeOnClickModal: false,
      type: 'warning',
    })
      .then(() => {
        if (callback1) {
          callback1()
        }
      })
      .catch(() => {
        if (callback2) {
          callback2()
        }
      })
  }

  /* 全局Notification */
  Vue.prototype.$baseNotify = (message, title, type, position) => {
    Notification({
      title: title,
      message: message,
      position: position || 'top-right',
      type: type || 'success',
      duration: messageDuration,
    })
  }

  /* 全局TableHeight */
  Vue.prototype.$baseTableHeight = (formType) => {
    let height = window.innerHeight
    let paddingHeight = 400
    const formHeight = 50

    if (layout === 'vertical') {
      paddingHeight = 340
    }

    if ('number' == typeof formType) {
      height = height - paddingHeight - formHeight * formType
    } else {
      height = height - paddingHeight
    }
    return height
  }

  /* 全局lodash */
  Vue.prototype.$baseLodash = lodash
  /* 全局事件总线 */
  Vue.prototype.$baseEventBus = new Vue()
}