let tpl = '
{svg}
', loading = '.dcat-loading', LOADING_SVG = [ '', '', ]; class Loading { constructor(Dcat, options) { options = $.extend({ container: Dcat.config.pjax_container_selector, zIndex: 100, width: '52px', color: '#7985d0', background: '#fff', style: '', svg: LOADING_SVG[0] }, options); let _this = this, defStyle = 'position:absolute;left:10px;right:10px;', content; _this.$container = $(options.container); content = $( tpl .replace('{svg}', options.svg) .replace('{color}', options.color) .replace('{color}', options.color) .replace('{width}', options.width) .replace('{style}', `${defStyle}background:${options.background};z-index:${options.zIndex};${options.style}`) ); content.appendTo(_this.$container); } destory() { this.$container.find(loading).remove(); } } function destroyAll() { $(loading).remove(); } function extend(Dcat) { // 全屏居中loading Dcat.loading = function (options) { if (options === false) { // 关闭loading return setTimeout(destroyAll, 70); } // 配置参数 options = $.extend({ color: '#5c6bc6', zIndex: 999991014, width: '58px', shade: 'rgba(255, 255, 255, 0.1)', background: 'transparent', top: 200, svg: LOADING_SVG[1], }, options); var win = $(window), // 容器 $container = $('
'), // 遮罩层直接沿用layer shadow = $('
'); $container.appendTo('body'); if (options.shade) { shadow.appendTo('body'); } function resize() { $container.css({ left: (win.width() - 300)/2, top: (win.height() - options.top)/2 }); } // 自适应窗口大小 win.on('resize', resize); resize(); $container.loading(options); }; // $.fn.loading = function (opt) { if (opt === false) { return $(this).find(loading).remove(); } opt = opt || {}; opt.container = $(this); return new Loading(Dcat, opt); }; } export default extend