mirror of
https://gitee.com/ElemeFE/element.git
synced 2024-11-30 03:07:36 +08:00
Loading: improve visual, add custom text
This commit is contained in:
Leopoldthecoder
parent
8484f127d3
commit
aeb9eb87a9
@ -1,9 +1,12 @@
|
||||
## 更新日志
|
||||
|
||||
### 1.0.0
|
||||
|
||||
*2016-11-9*
|
||||
|
||||
- 修复 TimePicker 选择范围时结束时间小于开始时间会重置开始时间, #894
|
||||
- 修复结合 `vue-i18n` 使用时会提示不能覆盖 `$t` 方法的问题
|
||||
- 新增 Loading 自定义加载文案的功能，并优化了视觉表现
|
||||
|
||||
|
||||
### 1.0.0-rc.9
|
||||
|
||||
@ -1,8 +1,6 @@
|
||||
<style>
|
||||
.el-loading-demo {
|
||||
border: solid 1px #999;
|
||||
border-radius: 4px;
|
||||
height: 100px;
|
||||
.demo-loading .el-table {
|
||||
border: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -10,8 +8,21 @@
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
tableData: [{
|
||||
date: '2016-05-03',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄'
|
||||
}, {
|
||||
date: '2016-05-02',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄'
|
||||
}, {
|
||||
date: '2016-05-04',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄'
|
||||
}],
|
||||
loading: true,
|
||||
loading2: false,
|
||||
loading2: true,
|
||||
fullscreenLoading: false
|
||||
}
|
||||
},
|
||||
@ -35,16 +46,46 @@
|
||||
在表格等容器中加载数据时显示。
|
||||
|
||||
:::demo 在 Loading 组件中，Element 准备了自定义命令`v-loading`，只需要绑定`Boolean`即可。默认状况下，Loading 遮罩会插入到绑定元素的子节点，通过添加`body`修饰符，可以使遮罩插入至 DOM 中的 body 上。
|
||||
|
||||
```html
|
||||
<template>
|
||||
<div v-loading="loading" class="el-loading-demo"></div>
|
||||
<el-table
|
||||
v-loading.body="loading"
|
||||
:data="tableData"
|
||||
style="width: 100%">
|
||||
<el-table-column
|
||||
prop="date"
|
||||
label="日期"
|
||||
width="180">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="name"
|
||||
label="姓名"
|
||||
width="180">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="address"
|
||||
label="地址">
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
tableData: [{
|
||||
date: '2016-05-03',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄'
|
||||
}, {
|
||||
date: '2016-05-02',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄'
|
||||
}, {
|
||||
date: '2016-05-04',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄'
|
||||
}],
|
||||
loading: true
|
||||
};
|
||||
}
|
||||
@ -53,6 +94,60 @@
|
||||
```
|
||||
:::
|
||||
|
||||
### 加载文案
|
||||
|
||||
可自定义加载文案。
|
||||
|
||||
:::demo 在绑定了`v-loading`指令的元素上添加`element-loading-text`属性，其值会被渲染为加载文案，并显示在加载图标的下方。
|
||||
```html
|
||||
<template>
|
||||
<el-table
|
||||
v-loading="loading2"
|
||||
element-loading-text="拼命加载中"
|
||||
:data="tableData"
|
||||
style="width: 100%">
|
||||
<el-table-column
|
||||
prop="date"
|
||||
label="日期"
|
||||
width="180">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="name"
|
||||
label="姓名"
|
||||
width="180">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="address"
|
||||
label="地址">
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
tableData: [{
|
||||
date: '2016-05-03',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄'
|
||||
}, {
|
||||
date: '2016-05-02',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄'
|
||||
}, {
|
||||
date: '2016-05-04',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄'
|
||||
}],
|
||||
loading2: true
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### 整页加载
|
||||
|
||||
页面数据加载时显示。
|
||||
|
||||
@ -1,4 +1,6 @@
|
||||
import Spinner from './spinner';
|
||||
import Vue from 'vue';
|
||||
let Spinner = Vue.extend(require('./spinner.vue'));
|
||||
|
||||
exports.install = Vue => {
|
||||
let toggleLoading = (el, binding) => {
|
||||
if (binding.value) {
|
||||
@ -88,11 +90,18 @@ exports.install = Vue => {
|
||||
el.maskStyle = {
|
||||
position: 'absolute',
|
||||
zIndex: '10000',
|
||||
backgroundColor: 'rgba(0, 0, 0, .65)',
|
||||
backgroundColor: 'rgba(255, 255, 255, .9)',
|
||||
margin: '0'
|
||||
};
|
||||
|
||||
el.spinner = (new Spinner()).el;
|
||||
let spinner = new Spinner({
|
||||
data: {
|
||||
text: el.getAttribute('element-loading-text'),
|
||||
fullScreen: !!binding.modifiers.fullscreen
|
||||
}
|
||||
});
|
||||
spinner.$mount(el.mask);
|
||||
el.spinner = spinner.$el;
|
||||
el.spinnerStyle = {
|
||||
position: 'absolute'
|
||||
};
|
||||
|
||||
@ -1,16 +0,0 @@
|
||||
import { addClass } from 'wind-dom/src/class';
|
||||
|
||||
class Spinner {
|
||||
constructor() {
|
||||
let spinner = document.createElement('div');
|
||||
addClass(spinner, 'el-loading-spinner');
|
||||
[1, 2, 3].forEach(index => {
|
||||
let bubble = document.createElement('div');
|
||||
addClass(bubble, `el-loading-bubble bubble${ index }`);
|
||||
spinner.appendChild(bubble);
|
||||
});
|
||||
this.el = spinner;
|
||||
}
|
||||
}
|
||||
|
||||
export default Spinner;
|
||||
21
packages/loading/src/spinner.vue
Normal file
21
packages/loading/src/spinner.vue
Normal file
@ -0,0 +1,21 @@
|
||||
<template>
|
||||
<div
|
||||
class="el-loading-spinner"
|
||||
:class="{ 'is-full-screen': fullScreen }">
|
||||
<svg class="circular" viewBox="25 25 50 50">
|
||||
<circle class="path" cx="50" cy="50" r="20" fill="none" stroke-miterlimit="10"/>
|
||||
</svg>
|
||||
<p v-if="text" class="el-loading-text">{{ text }}</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
text: null,
|
||||
fullScreen: false
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -539,4 +539,9 @@
|
||||
--datepicker-inrange-hover-color: #AFDCFF;
|
||||
--datepicker-active-color: var(--color-primary);
|
||||
--datepicker-text-hover-color: #20a0ff;
|
||||
|
||||
/* Loading
|
||||
--------------------------*/
|
||||
--loading-spinner-size: 42px;
|
||||
--loading-fullscreen-spinner-size: 64px;
|
||||
}
|
||||
|
||||
@ -1,44 +1,62 @@
|
||||
@charset "UTF-8";
|
||||
@import "./common/var.css";
|
||||
|
||||
.el-loading-spinner {
|
||||
height: 12px;
|
||||
width: 60px;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
font-size: 0;
|
||||
margin-top: calc(- var(--loading-spinner-size) / 2);
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
margin-top: -6px;
|
||||
margin-left: -30px;
|
||||
z-index: 10001;
|
||||
}
|
||||
|
||||
.el-loading-bubble {
|
||||
height: 12px;
|
||||
width: 12px;
|
||||
background-color: #fff;
|
||||
margin: 0 3px;
|
||||
border-radius: 50%;
|
||||
display: inline-block;
|
||||
animation: 1s cubic-bezier(.2,.68,.18,1.08) infinite both bubble-pulse;
|
||||
}
|
||||
|
||||
.el-loading-bubble.bubble1 {
|
||||
animation-delay: .16s;
|
||||
}
|
||||
|
||||
.el-loading-bubble.bubble2 {
|
||||
animation-delay: .32s;
|
||||
}
|
||||
|
||||
.el-loading-bubble.bubble3 {
|
||||
animation-delay: .48s;
|
||||
}
|
||||
|
||||
@keyframes bubble-pulse {
|
||||
0%, 80% {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
.el-loading-text {
|
||||
color: var(--color-primary);
|
||||
margin: 3px 0;
|
||||
font-size: 16px;
|
||||
}
|
||||
45% {
|
||||
transform: scale(0);
|
||||
opacity: 0;
|
||||
|
||||
.circular {
|
||||
width: var(--loading-spinner-size);
|
||||
animation: rotate 2s linear infinite;
|
||||
}
|
||||
}
|
||||
|
||||
.path {
|
||||
stroke-dasharray: 1, 100;
|
||||
stroke-dashoffset: 0;
|
||||
stroke-width: 2;
|
||||
stroke: var(--color-primary);
|
||||
animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
|
||||
stroke-linecap: round;
|
||||
}
|
||||
|
||||
@when full-screen {
|
||||
margin-top: calc(- var(--loading-fullscreen-spinner-size) / 2);
|
||||
|
||||
.circular {
|
||||
width: var(--loading-fullscreen-spinner-size);
|
||||
}
|
||||
|
||||
.path {
|
||||
stroke-width: 3;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes rotate {
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes dash {
|
||||
0% {
|
||||
stroke-dasharray: 1, 100;
|
||||
stroke-dashoffset: 0;
|
||||
}
|
||||
50% {
|
||||
stroke-dasharray: 45, 100;
|
||||
stroke-dashoffset: -35px;
|
||||
}
|
||||
100% {
|
||||
stroke-dasharray: 45, 100;
|
||||
stroke-dashoffset: -124px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -136,4 +136,25 @@ describe('Loading', () => {
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
it('text', done => {
|
||||
vm = createVue({
|
||||
template: `
|
||||
<div v-loading="loading" element-loading-text="拼命加载中"></div>
|
||||
`,
|
||||
|
||||
data() {
|
||||
return {
|
||||
loading: true
|
||||
};
|
||||
}
|
||||
}, true);
|
||||
Vue.nextTick(() => {
|
||||
const mask = document.querySelector('.el-loading-mask');
|
||||
const text = mask.querySelector('.el-loading-text');
|
||||
expect(text).to.exist;
|
||||
expect(text.textContent).to.equal('拼命加载中');
|
||||
done();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
Loading…
Reference in New Issue
Block a user