mirror of
https://gitee.com/ElemeFE/element.git
synced 2024-11-30 11:17:38 +08:00
update loading
This commit is contained in:
Leopoldthecoder
parent
d1319b2fea
commit
e28f33905d
@ -64,14 +64,14 @@
|
||||
|
||||
## 基本用法
|
||||
|
||||
<el-button :plain="true" v-on:click="loading = !loading">打开 / 关闭 loading</el-button>
|
||||
<el-button :plain="true" v-on:click.native="loading = !loading">打开 / 关闭 loading</el-button>
|
||||
|
||||
<div v-loading="loading" class="el-loading-demo">
|
||||
<p>点击上面的按钮，本区域显示 loading 遮罩</p>
|
||||
</div>
|
||||
|
||||
```html
|
||||
<el-button :plain="true" v-on:click="loading = !loading">打开 / 关闭 loading</el-button>
|
||||
<el-button :plain="true" v-on:click.native="loading = !loading">打开 / 关闭 loading</el-button>
|
||||
|
||||
<div v-loading="loading" class="el-loading-demo">
|
||||
<p>点击上面的按钮，本区域显示 loading 遮罩</p>
|
||||
@ -82,14 +82,14 @@
|
||||
|
||||
loading 遮罩默认插入至绑定了 `v-loading` 指令的元素上。通过添加 `body` 修饰符，可以使遮罩插入至 body 上
|
||||
|
||||
<el-button :plain="true" v-on:click="loading2 = !loading2">打开 / 关闭 loading</el-button>
|
||||
<el-button :plain="true" v-on:click.native="loading2 = !loading2">打开 / 关闭 loading</el-button>
|
||||
|
||||
<div v-loading.body="loading2" class="el-loading-demo">
|
||||
<p>点击上面的按钮，本区域显示 loading 遮罩</p>
|
||||
</div>
|
||||
|
||||
```html
|
||||
<el-button :plain="true" v-on:click="loading2 = !loading2">打开 / 关闭 loading</el-button>
|
||||
<el-button :plain="true" v-on:click.native="loading2 = !loading2">打开 / 关闭 loading</el-button>
|
||||
|
||||
<div v-loading.body="loading2" class="el-loading-demo">
|
||||
<p>点击上面的按钮，本区域显示 loading 遮罩</p>
|
||||
@ -98,13 +98,13 @@ loading 遮罩默认插入至绑定了 `v-loading` 指令的元素上。通过
|
||||
|
||||
当需要全屏遮罩时，可使用 `fullscreen` 修饰符（此时遮罩会插入至 body 上）
|
||||
|
||||
<el-button :plain="true" v-on:click="openFullScreen" v-loading.fullscreen="fullscreenLoading">打开全屏 loading</el-button>
|
||||
<el-button :plain="true" v-on:click.native="openFullScreen" v-loading.fullscreen="fullscreenLoading">打开全屏 loading</el-button>
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-button
|
||||
:plain="true"
|
||||
v-on:click="openFullScreen"
|
||||
v-on:click.native="openFullScreen"
|
||||
v-loading.fullscreen="fullscreenLoading">
|
||||
打开全屏 loading
|
||||
</el-button>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
exports.install = Vue => {
|
||||
let insertDom = (parent, directive) => {
|
||||
let insertDom = (parent, directive, binding) => {
|
||||
if (!directive.domVisible) {
|
||||
Object.keys(directive.maskStyle).forEach(property => {
|
||||
directive.mask.style[property] = directive.maskStyle[property];
|
||||
@ -12,7 +12,7 @@ exports.install = Vue => {
|
||||
if (directive.originalPosition !== 'absolute') {
|
||||
parent.style.position = 'relative';
|
||||
}
|
||||
if (directive.modifiers.fullscreen) {
|
||||
if (binding.modifiers.fullscreen) {
|
||||
parent.style.overflow = 'hidden';
|
||||
}
|
||||
directive.mask.style.display = 'block';
|
||||
@ -26,19 +26,19 @@ exports.install = Vue => {
|
||||
};
|
||||
|
||||
Vue.directive('loading', {
|
||||
bind: function() {
|
||||
this.mask = document.createElement('div');
|
||||
this.mask.className = 'el-loading-mask';
|
||||
this.maskStyle = {
|
||||
bind: function(el) {
|
||||
el.mask = document.createElement('div');
|
||||
el.mask.className = 'el-loading-mask';
|
||||
el.maskStyle = {
|
||||
position: 'absolute',
|
||||
zIndex: '10000',
|
||||
backgroundColor: 'rgba(0, 0, 0, .7)',
|
||||
margin: '0'
|
||||
};
|
||||
|
||||
this.spinner = document.createElement('i');
|
||||
this.spinner.className = 'el-icon-loading';
|
||||
this.spinnerStyle = {
|
||||
el.spinner = document.createElement('i');
|
||||
el.spinner.className = 'el-icon-loading';
|
||||
el.spinnerStyle = {
|
||||
color: '#ddd',
|
||||
fontSize: '32px',
|
||||
position: 'absolute',
|
||||
@ -50,69 +50,69 @@ exports.install = Vue => {
|
||||
};
|
||||
},
|
||||
|
||||
update: function(val) {
|
||||
if (val) {
|
||||
update: function(el, binding) {
|
||||
if (binding.value) {
|
||||
Vue.nextTick(() => {
|
||||
if (this.modifiers.fullscreen) {
|
||||
this.originalPosition = document.body.style.position;
|
||||
this.originalOverflow = document.body.style.overflow;
|
||||
if (binding.modifiers.fullscreen) {
|
||||
el.originalPosition = document.body.style.position;
|
||||
el.originalOverflow = document.body.style.overflow;
|
||||
|
||||
['top', 'right', 'bottom', 'left'].forEach(property => {
|
||||
this.maskStyle[property] = '0';
|
||||
el.maskStyle[property] = '0';
|
||||
});
|
||||
this.maskStyle.position = 'fixed';
|
||||
this.spinnerStyle.position = 'fixed';
|
||||
el.maskStyle.position = 'fixed';
|
||||
el.spinnerStyle.position = 'fixed';
|
||||
|
||||
insertDom(document.body, this);
|
||||
insertDom(document.body, el, binding);
|
||||
} else {
|
||||
if (this.modifiers.body) {
|
||||
this.originalPosition = document.body.style.position;
|
||||
if (binding.modifiers.body) {
|
||||
el.originalPosition = document.body.style.position;
|
||||
|
||||
['top', 'left'].forEach(property => {
|
||||
this.maskStyle[property] = this.el.getBoundingClientRect()[property] + document.body[`scroll${ property[0].toUpperCase() + property.slice(1) }`] + 'px';
|
||||
el.maskStyle[property] = el.getBoundingClientRect()[property] + document.body[`scroll${ property[0].toUpperCase() + property.slice(1) }`] + 'px';
|
||||
});
|
||||
['height', 'width'].forEach(property => {
|
||||
this.maskStyle[property] = this.el.getBoundingClientRect()[property] + 'px';
|
||||
el.maskStyle[property] = el.getBoundingClientRect()[property] + 'px';
|
||||
});
|
||||
|
||||
insertDom(document.body, this);
|
||||
insertDom(document.body, el, binding);
|
||||
} else {
|
||||
this.originalPosition = this.el.style.position;
|
||||
el.originalPosition = el.style.position;
|
||||
|
||||
['top', 'right', 'bottom', 'left'].forEach(property => {
|
||||
this.maskStyle[property] = '0';
|
||||
el.maskStyle[property] = '0';
|
||||
});
|
||||
|
||||
insertDom(this.el, this);
|
||||
insertDom(el, el, binding);
|
||||
}
|
||||
}
|
||||
});
|
||||
} else {
|
||||
if (this.domVisible) {
|
||||
this.mask.style.display = 'none';
|
||||
this.spinner.style.display = 'none';
|
||||
this.domVisible = false;
|
||||
if (el.domVisible) {
|
||||
el.mask.style.display = 'none';
|
||||
el.spinner.style.display = 'none';
|
||||
el.domVisible = false;
|
||||
|
||||
if (this.modifiers.fullscreen) {
|
||||
document.body.style.overflow = this.originalOverflow;
|
||||
if (binding.modifiers.fullscreen) {
|
||||
document.body.style.overflow = el.originalOverflow;
|
||||
}
|
||||
if (this.modifiers.fullscreen || this.modifiers.body) {
|
||||
document.body.style.position = this.originalPosition;
|
||||
if (binding.modifiers.fullscreen || binding.modifiers.body) {
|
||||
document.body.style.position = el.originalPosition;
|
||||
} else {
|
||||
this.el.style.position = this.originalPosition;
|
||||
el.style.position = el.originalPosition;
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
unbind: function() {
|
||||
if (this.domInserted) {
|
||||
if (this.modifiers.fullscreen || this.modifiers.body) {
|
||||
document.body.removeChild(this.mask);
|
||||
this.mask.removeChild(this.spinner);
|
||||
unbind: function(el, binding) {
|
||||
if (el.domInserted) {
|
||||
if (binding.modifiers.fullscreen || binding.modifiers.body) {
|
||||
document.body.removeChild(el.mask);
|
||||
el.mask.removeChild(el.spinner);
|
||||
} else {
|
||||
this.el.removeChild(this.mask);
|
||||
this.mask.removeChild(this.spinner);
|
||||
el.removeChild(el.mask);
|
||||
el.mask.removeChild(el.spinner);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user