Merge pull request #925 from Leopoldthecoder/master

Loading: improve visual, add custom text

CHANGELOG.md

@@ -1,9 +1,12 @@
 ## 更新日志
 
 ### 1.0.0
+
 *2016-11-9*
+
 - 修复 TimePicker 选择范围时结束时间小于开始时间会重置开始时间, #894
 - 修复结合 `vue-i18n` 使用时会提示不能覆盖 `$t` 方法的问题
+- 新增 Loading 自定义加载文案的功能，并优化了视觉表现
 
 
 ### 1.0.0-rc.9

examples/docs/zh-CN/loading.md

@@ -1,8 +1,6 @@
 <style>
-  .el-loading-demo {
+  .demo-loading .el-table {
-    border: solid 1px #999;
+    border: none;
-    border-radius: 4px;
-    height: 100px;
   }
 </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>
+```
+:::
+
 ### 整页加载
 
 页面数据加载时显示。

packages/loading/src/directive.js

@@ -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'
       };

packages/loading/src/spinner.js

@@ -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;

packages/loading/src/spinner.vue

@@ -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>

packages/theme-default/src/common/var.css

@@ -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;
 }

packages/theme-default/src/loading.css

@@ -1,44 +1,62 @@
+@charset "UTF-8";
+@import "./common/var.css";
+
 .el-loading-spinner {
-  height: 12px;
-  width: 60px;
   top: 50%;
-  left: 50%;
+  margin-top: calc(- var(--loading-spinner-size) / 2);
-  font-size: 0;
+  width: 100%;
   text-align: center;
-  margin-top: -6px;
+
-  margin-left: -30px;
+  .el-loading-text {
-  z-index: 10001;
+    color: var(--color-primary);
+    margin: 3px 0;
+    font-size: 16px;
   }
 
-.el-loading-bubble {
+  .circular {
-  height: 12px;
+    width: var(--loading-spinner-size);
-  width: 12px;
+    animation: rotate 2s linear infinite;
-  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 {
+  .path {
-  animation-delay: .16s;
+    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;
   }
 
-.el-loading-bubble.bubble2 {
+  @when full-screen {
-  animation-delay: .32s;
+    margin-top: calc(- var(--loading-fullscreen-spinner-size) / 2);
+
+    .circular {
+      width: var(--loading-fullscreen-spinner-size);
     }
 
-.el-loading-bubble.bubble3 {
+    .path {
-  animation-delay: .48s;
+      stroke-width: 3;
+    }
+  }
 }
 
-@keyframes bubble-pulse {
+@keyframes rotate {
-  0%, 80% {
+  100% {
-    transform: scale(1);
+    transform: rotate(360deg);
-    opacity: 1;
+  }
-  }
+}
-  45% {
+
-    transform: scale(0);
+@keyframes dash {
-    opacity: 0;
+  0% {
+    stroke-dasharray: 1, 100;
+    stroke-dashoffset: 0;
+  }
+  50% {
+    stroke-dasharray: 45, 100;
+    stroke-dashoffset: -35px;
+  }
+  100% {
+    stroke-dasharray: 45, 100;
+    stroke-dashoffset: -124px;
   }
 }

test/unit/specs/loading.spec.js

@@ -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();
+    });
+  });
 });