test/element
1
0
Fork 0
mirror of https://gitee.com/ElemeFE/element.git synced 2024-11-30 11:17:38 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

update loading

Browse Source
This commit is contained in:
Leopoldthecoder 2016-08-12 15:49:47 +08:00
parent d1319b2fea
commit e28f33905d
2 changed files with 48 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
examples/docs/loading.md
View File

@ -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"> <div v-loading="loading" class="el-loading-demo">
<p>点击上面的按钮，本区域显示 loading 遮罩</p> <p>点击上面的按钮，本区域显示 loading 遮罩</p>
</div> </div>
```html ```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"> <div v-loading="loading" class="el-loading-demo">
<p>点击上面的按钮，本区域显示 loading 遮罩</p> <p>点击上面的按钮，本区域显示 loading 遮罩</p>
@ -82,14 +82,14 @@
loading 遮罩默认插入至绑定了 `v-loading` 指令的元素上。通过添加 `body` 修饰符，可以使遮罩插入至 body 上 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"> <div v-loading.body="loading2" class="el-loading-demo">
<p>点击上面的按钮，本区域显示 loading 遮罩</p> <p>点击上面的按钮，本区域显示 loading 遮罩</p>
</div> </div>
```html ```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"> <div v-loading.body="loading2" class="el-loading-demo">
<p>点击上面的按钮，本区域显示 loading 遮罩</p> <p>点击上面的按钮，本区域显示 loading 遮罩</p>
@ -98,13 +98,13 @@ loading 遮罩默认插入至绑定了 `v-loading` 指令的元素上。通过
当需要全屏遮罩时，可使用 `fullscreen` 修饰符（此时遮罩会插入至 body 上） 当需要全屏遮罩时，可使用 `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 ```html
<template> <template>
<el-button <el-button
:plain="true" :plain="true"
v-on:click="openFullScreen" v-on:click.native="openFullScreen"
v-loading.fullscreen="fullscreenLoading"> v-loading.fullscreen="fullscreenLoading">
打开全屏 loading 打开全屏 loading
</el-button> </el-button>

84
packages/loading/src/directive.js
View File

@ -1,5 +1,5 @@
exports.install = Vue => { exports.install = Vue => {
let insertDom = (parent, directive) => { let insertDom = (parent, directive, binding) => {
if (!directive.domVisible) { if (!directive.domVisible) {
Object.keys(directive.maskStyle).forEach(property => { Object.keys(directive.maskStyle).forEach(property => {
directive.mask.style[property] = directive.maskStyle[property]; directive.mask.style[property] = directive.maskStyle[property];
@ -12,7 +12,7 @@ exports.install = Vue => {
if (directive.originalPosition !== 'absolute') { if (directive.originalPosition !== 'absolute') {
parent.style.position = 'relative'; parent.style.position = 'relative';
} }
if (directive.modifiers.fullscreen) { if (binding.modifiers.fullscreen) {
parent.style.overflow = 'hidden'; parent.style.overflow = 'hidden';
} }
directive.mask.style.display = 'block'; directive.mask.style.display = 'block';
@ -26,19 +26,19 @@ exports.install = Vue => {
}; };
Vue.directive('loading', { Vue.directive('loading', {
bind: function() { bind: function(el) {
this.mask = document.createElement('div'); el.mask = document.createElement('div');
this.mask.className = 'el-loading-mask'; el.mask.className = 'el-loading-mask';
this.maskStyle = { el.maskStyle = {
position: 'absolute', position: 'absolute',
zIndex: '10000', zIndex: '10000',
backgroundColor: 'rgba(0, 0, 0, .7)', backgroundColor: 'rgba(0, 0, 0, .7)',
margin: '0' margin: '0'
}; };
this.spinner = document.createElement('i'); el.spinner = document.createElement('i');
this.spinner.className = 'el-icon-loading'; el.spinner.className = 'el-icon-loading';
this.spinnerStyle = { el.spinnerStyle = {
color: '#ddd', color: '#ddd',
fontSize: '32px', fontSize: '32px',
position: 'absolute', position: 'absolute',
@ -50,69 +50,69 @@ exports.install = Vue => {
}; };
}, },
update: function(val) { update: function(el, binding) {
if (val) { if (binding.value) {
Vue.nextTick(() => { Vue.nextTick(() => {
if (this.modifiers.fullscreen) { if (binding.modifiers.fullscreen) {
this.originalPosition = document.body.style.position; el.originalPosition = document.body.style.position;
this.originalOverflow = document.body.style.overflow; el.originalOverflow = document.body.style.overflow;
['top', 'right', 'bottom', 'left'].forEach(property => { ['top', 'right', 'bottom', 'left'].forEach(property => {
this.maskStyle[property] = '0'; el.maskStyle[property] = '0';
}); });
this.maskStyle.position = 'fixed'; el.maskStyle.position = 'fixed';
this.spinnerStyle.position = 'fixed'; el.spinnerStyle.position = 'fixed';
insertDom(document.body, this); insertDom(document.body, el, binding);
} else { } else {
if (this.modifiers.body) { if (binding.modifiers.body) {
this.originalPosition = document.body.style.position; el.originalPosition = document.body.style.position;
['top', 'left'].forEach(property => { ['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 => { ['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 { } else {
this.originalPosition = this.el.style.position; el.originalPosition = el.style.position;
['top', 'right', 'bottom', 'left'].forEach(property => { ['top', 'right', 'bottom', 'left'].forEach(property => {
this.maskStyle[property] = '0'; el.maskStyle[property] = '0';
}); });
insertDom(this.el, this); insertDom(el, el, binding);
} }
} }
}); });
} else { } else {
if (this.domVisible) { if (el.domVisible) {
this.mask.style.display = 'none'; el.mask.style.display = 'none';
this.spinner.style.display = 'none'; el.spinner.style.display = 'none';
this.domVisible = false; el.domVisible = false;
if (this.modifiers.fullscreen) { if (binding.modifiers.fullscreen) {
document.body.style.overflow = this.originalOverflow; document.body.style.overflow = el.originalOverflow;
} }
if (this.modifiers.fullscreen || this.modifiers.body) { if (binding.modifiers.fullscreen || binding.modifiers.body) {
document.body.style.position = this.originalPosition; document.body.style.position = el.originalPosition;
} else { } else {
this.el.style.position = this.originalPosition; el.style.position = el.originalPosition;
} }
} }
} }
}, },
unbind: function() { unbind: function(el, binding) {
if (this.domInserted) { if (el.domInserted) {
if (this.modifiers.fullscreen || this.modifiers.body) { if (binding.modifiers.fullscreen || binding.modifiers.body) {
document.body.removeChild(this.mask); document.body.removeChild(el.mask);
this.mask.removeChild(this.spinner); el.mask.removeChild(el.spinner);
} else { } else {
this.el.removeChild(this.mask); el.removeChild(el.mask);
this.mask.removeChild(this.spinner); el.mask.removeChild(el.spinner);
} }
} }
} }